如何将页脚(div)与页面底部对齐？

问题描述

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

最佳解决方案

UPDATE

我原来的答案是很久以前的，链接断了，更新它，使其继续有用。

我正在列出更新的解决方案，以及 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/

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.

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

这是另一个也许更好的解决方案：

http://www.cssstickyfooter.com/

如果您需要帮助，请通知我们。我希望这有帮助。

次佳解决方案

这将使 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 应该是一样的，以便页脚不显示内容。

第三种解决方案

您的标题和评论意味着您不是在寻找粘性页脚 (卡在窗口的底部，因为内容在其下滚动) 。我假设你正在寻找一个页脚，如果内容没有填满窗口，那么这个页脚会被强制到窗口的底部，如果内容超过窗口边界，则下拉到底部。

你可以用以下方式来完成这个。

<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

第四种方案

检查这个，工作在 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>

第五种方案

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

参考文献

How to align footer (div) to the bottom of the page? [duplicate]

注：本文内容整合自 Google/Baidu/Bing 辅助翻译的英文资料结果。如果您对结果不满意，可以加入我们改善翻译效果：薇晓朵技术论坛。

如何将页脚 (div) 与页面底部对齐？