Question

任何人都可以解释如何将页脚div对齐到页面底部。从我看过的例子中，无论你在哪里滚动页面，它们都会显示如何使div在底部保持可见。虽然我不想那样。我希望它固定在页面的底部，所以它不会移动。感谢帮助！

Answer 1

<强>更新

我原来的回答是很久以前的，而且链接被打破了;更新它以使其继续有用。

我包括内联的更新解决方案，以及JSFiddle的工作示例。注意：我依赖于CSS重置，但我没有将这些样式包括在内。请参阅normalize.css

解决方案1 - 保证金抵消

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

<强> 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

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;
}

解决方案2 - flexbox

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

<强> HTML

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

<强> 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;
}

以下是一些链接，包含更详细的解释和不同的方法：

原始回答

这是你的意思吗？

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

此方法仅使用15行CSS并且几乎不使用任何HTML标记。更好的是，它是完全有效的CSS，并且适用于所有主流浏览器。 Internet Explorer 5及更高版本，Firefox，Safari，Opera等。

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

如果您需要有关实施方面的帮助，请与我们联系。我希望这会有所帮助。

Answer 2

这会使div固定在页面底部，但如果页面很长，只有在向下滚动时才会显示。

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

高度和margin-top应该相同，以便页脚不显示内容。

Answer 3

您的标题和评论意味着您没有寻找粘性页脚（当内容在其下方滚动时粘在窗口的底部）。我假设您正在寻找一个页脚，如果内容没有填满窗口，将被强制到窗口底部，如果内容超出窗口边界，则向下推到内容的底部。

您可以通过以下方式完成此任务。

<style>
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>

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

来源：How to keep footers at the bottom of the page

Answer 4

检查一下，适用于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>

Answer 5

使用<div style="position:fixed;bottom:0;height:auto;margin-top:40px;width:100%;text-align:center">I am footer</div>。页脚不会向上

Answer 6

我使用的简单解决方案适用于IE8 +

在html上给出min-height：100％，这样如果内容少于页面，则页面底部会显示完整的视图端口高度和页脚。当内容增加时，页脚会随着内容向下移动并保持坚持到底。

JS小提琴演奏演示：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>

Answer 7

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

示例：我的内容布局的高度为1000px，所以我在页脚css中放置了一个1005px的margin-top值，这给了我一个5px的边框和一个位于我网站底部的页脚。

可能是一种业余的方式，但有效!!!

如何将页脚（div）对齐到页面底部？

7 个答案:

的CSS

HTML