如何将页脚(div)对齐到页面底部?(复制)

This question already has an answer here:

这个问题已经有了答案:

• How do you get the footer to stay at the bottom of a Web page? 21 answers
• 如何让页脚保持在网页的底部?21日答案

Can anyone explain how to align a footer div to the bottom of the page. From the examples I've seen, they all show how to make the div stay visible at the bottom, no matter where you've scrolled the page. Although I don't want it like that. I want it fixed at the bottom of the page, so it doesn't move. Appreciate the help!

有人能解释一下如何将页脚div对齐到页面底部吗?从我所看到的示例中，它们都显示了如何使div在底部可见，无论您在哪里滚动页面。虽然我不想那样。我想把它固定在页面底部，这样它就不会移动。感谢帮助!

7 个解决方案

#1

UPDATE

更新

My original answer is from a long time ago, and the links are broken; updating it so that it continues to be useful.

我最初的答案是很久以前的，链接被破坏了;更新它，使它继续有用。

I'm including updated solutions inline, as well as a working examples on JSFiddle. Note: I'm relying on a CSS reset, though I'm not including those styles inline. Refer to normalize.css

我将内联地包含更新的解决方案，以及关于JSFiddle的一个工作示例。注意:我依赖于CSS重置，尽管我没有将这些样式包含在内。指normalize.css

Solution 1 - margin offset

解决方案1 -边际偏移

https://jsfiddle.net/UnsungHero97/ur20fndv/2/

https://jsfiddle.net/UnsungHero97/ur20fndv/2/

HTML

HTML

<div id="wrapper">
  <div id="content">
    <h1>Hello, World!</h1>
  </div>
</div>
<footer id="footer">
  <div id="footer-content">Sticky Footer</div>
</footer>

CSS

CSS

html, body {
  margin: 0px;
  padding: 0px;
  min-height: 100%;
  height: 100%;
}

#wrapper {
  background-color: #e3f2fd;
  min-height: 100%;
  height: auto !important;
  margin-bottom: -50px; /* the bottom margin is the negative value of the footer's total height */
}

#wrapper:after {
  content: "";
  display: block;
  height: 50px; /* the footer's total height */
}

#content {
  height: 100%;
}

#footer {
  height: 50px; /* the footer's total height */
}

#footer-content {
  background-color: #f3e5f5;
  border: 1px solid #ab47bc;
  height: 32px; /* height + top/bottom paddding + top/bottom border must add up to footer height */
  padding: 8px;
}

Solution 2 - flexbox

解决方案2 - flexbox

https://jsfiddle.net/UnsungHero97/oqom5e5m/3/

https://jsfiddle.net/UnsungHero97/oqom5e5m/3/

HTML

HTML

<div id="content">
  <h1>Hello, World!</h1>
</div>
<footer id="footer">Sticky Footer</footer>

CSS

CSS

html {
  height: 100%;
}

body {
  display: flex;
  flex-direction: column;
  min-height: 100%;
}

#content {
  background-color: #e3f2fd;
  flex: 1;
  padding: 20px;
}

#footer {
  background-color: #f3e5f5;
  padding: 20px;
}

Here's some links with more detailed explanations and different approaches:

这里有一些更详细的解释和不同方法的链接:

• https://css-tricks.com/couple-takes-sticky-footer/
• https://css-tricks.com/couple-takes-sticky-footer/
• https://philipwalton.github.io/solved-by-flexbox/demos/sticky-footer/
• https://philipwalton.github.io/solved-by-flexbox/demos/sticky-footer/
• http://matthewjamestaylor.com/blog/keeping-footers-at-the-bottom-of-the-page
• http://matthewjamestaylor.com/blog/keeping-footers-at-the-bottom-of-the-page

---

ORIGINAL ANSWER

原来的答案

Is this what you mean?

你是这个意思吗?

http://ryanfait.com/sticky-footer/

http://ryanfait.com/sticky-footer/

This method uses only 15 lines of CSS and hardly any HTML markup. Even better, it's completely valid CSS, and it works in all major browsers. Internet Explorer 5 and up, Firefox, Safari, Opera and more.

这个方法只使用了15行CSS，几乎没有任何HTML标记。更好的是，它是完全有效的CSS，并且适用于所有主要的浏览器。Internet Explorer 5和以上，Firefox, Safari, Opera等。

This footer will stay at the bottom of the page permanently. This means that if the content is more than the height of the browser window, you will need to scroll down to see the footer... but if the content is less than the height of the browser window, the footer will stick to the bottom of the browser window instead of floating up in the middle of the page.

这个页脚将永久地停留在页面的底部。这意味着如果内容超过浏览器窗口的高度，您将需要向下滚动才能看到页脚……但是如果内容小于浏览器窗口的高度，页脚将会停留在浏览器窗口的底部，而不是在页面中间浮动。

Let me know if you need help with the implementation. I hope this helps.

如果需要帮助实现，请告诉我。我希望这可以帮助。

#2

This will make the div fixed at the bottom of the page but in case the page is long it will only be visible when you scroll down.

这将使div固定在页面的底部，但如果页面很长，只有向下滚动时才能看到它。

<style type="text/css">
  #footer {
    position : absolute;
    bottom : 0;
    height : 40px;
    margin-top : 40px;
  }
</style>
<div id="footer">I am footer</div>

The height and margin-top should be the same so that the footer doesnt show over the content.

高度和页边距应该相同，这样页脚就不会显示内容。

#3

Your title and comments imply that you weren't looking for a sticky footer (stuck to the bottom of the window as content scrolls below it). I assume you were looking for a footer that would be forced to the bottom of the window if the content does not fill the window, and push down to the bottom of the content if the content exceeds the window boundary.

你的标题和评论暗示你不是在寻找一个粘性的页脚(在窗口的底部贴着内容滚动条)。我假设您正在寻找一个页脚，如果内容没有填满窗口，它将被强制放在窗口的底部;如果内容超过窗口边界，则向下推到内容的底部。

You can accomplish this with the following.

您可以通过以下步骤来完成此任务。

&ltstyle>
html,
body {
    margin:0;
    padding:0;
    height:100%;
}
#container {
    min-height:100%;
    position:relative;
}
#header {
    background:#ff0;
    padding:10px;
}
#body {
    padding:10px;
    padding-bottom:60px;   /* Height of the footer */
}
#footer {
    position:absolute;
    bottom:0;
    width:100%;
    height:60px;   /* Height of the footer */
    background:#6cf;
}
</style>

&ltdiv id="container">
    &ltdiv id="header">header</div>
    &ltdiv id="body">body</div>
    &ltdiv id="footer">footer</div>
</div>

Source: How to keep footers at the bottom of the page

资料来源:如何保持页脚在页底

#4

check this out, works on firefox and IE

看看这个，适用于firefox和IE

<style>
    html, body
    {
        height: 100%;
    }
    .content
    {
        min-height: 100%;
    }
    .footer
    {
        position: relative;
        clear: both;
    }
</style>

<body>
<div class="content">Page content
</div>
<div class="footer">this is my footer
</div>
</body>

#5

Use <div style="position:fixed;bottom:0;height:auto;margin-top:40px;width:100%;text-align:center">I am footer</div>. Footer will not go upwards

使用

;页脚不会向上移动

#6

A simple solution that i use, works from IE8+

我使用的一个简单的解决方案，来自IE8+。

Give min-height:100% on html so that if content is less then still page takes full view-port height and footer sticks at bottom of page. When content increases the footer shifts down with content and keep sticking to bottom.

在html上设置最小高度:100%，这样如果内容减少，页面仍然保持完整的视图端口高度，页脚位于页面底部。当内容增加时，页脚随着内容向下移动，并一直粘在底部。

JS fiddle working Demo: http://jsfiddle.net/3L3h64qo/2/

小提琴工作演示:http://jsfiddle.net/3L3h64qo/2/

Css

html{
  position:relative; 
  min-height: 100%;
}
/*Normalize html and body elements,this style is just good to have*/
html,body{
  margin:0;
  padding:0;
}
.pageContentWrapper{
  margin-bottom:100px;/* Height of footer*/
} 
.footer{
    position: absolute;
    bottom: 0;
    left: 0;
    right: 0;
    height:100px;
    background:#ccc;
}

Html

   <html>
    <body>
        <div class="pageContentWrapper">
            <!-- All the page content goes here-->
        </div>
        <div class="footer">
        </div>
    </body>
    </html>

#7

I am a newbie and these methods are not working for me. However, I tried a margin-top property in css and simply added the value of content pixels +5.

我是新手，这些方法对我不起作用。但是，我在css中尝试了一个边栏顶部属性，只添加了内容像素+5的值。

Example: my content layout had a height of 1000px so I put a margin-top value of 1005px in the footer css which gave me a 5px border and a footer that sits delightfully at the bottom of my site.

示例:我的内容布局的高度是1000px，所以我在页脚css中设置了1005px的页眉值，这给了我一个5px的边框，还有一个页脚，放在我的网站底部，很好看。

Probably an amateur way of doing it, but EFFECTIVE!!!

可能是业余爱好者的做法，但很有效!!