CSS - 使 FLUID 高度页脚粘在页面底部答案

【问题标题】：CSS - make a FLUID height footer stick to bottom of pageCSS - 使 FLUID 高度页脚粘在页面底部
【发布时间】：2013-12-28 13:24:55
【问题描述】：

如果页面内容不多，如 300 像素左右，页脚将出现在页面中间，分辨率为 1024。

如何在不知道页脚高度的情况下让页脚显示在页面底部？

我试过this解决方案：

/* css */
html, body {
    height: 100%;
}

#container {
    min-height: 100%;
    position: relative;
}

#footer {
    position: absolute;
    bottom: 0;
}


<!-- html -->
<html>
<head></head>

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

但问题是我需要在#footer 之前的元素中添加padding-bottom: (footerheight);。这是不可能的，因为页脚高度因页面而异...

【问题讨论】：

不一定是最有效的方法，但您可以在每个页面上嵌入 CSS 来调整这些特定元素。
您可以选择使用 Javascript/jQuery 吗？除非您遵循 Archonix 的建议，否则仅使用 CSS 似乎很难或不可能完成。
jquery 使页面“闪烁”，直到页脚得到修复。如果有一个不会产生这种闪烁的 javascript 解决方案，是的，我很乐意使用它:)
这取决于你如何完成它。您可以让页脚从height:0 向上设置动画，以掩饰它定位较晚或类似的事实。晚饭后我会试试看的

标签： html css footer sticky-footer

【解决方案1】：

你为什么不在内容区域上使用 min-height，所以如果你将 min-height 设置为 600px，如果只有 300px 的内容，它会将页脚向下填充另外 300px，因此它不在中间屏幕

【讨论】：

你怎么知道 600px 不在屏幕中间？如果我有 1200 像素的屏幕怎么办？

【解决方案2】：

你无法逃避这一点，但有一个技巧：使正文背景与页脚的背景相同，然后将所有其他内容放在正文顶部的容器中。

这将创建一个 75 像素的页脚。注意容器 div 的相关 -75px 边距。

html {
  height:100%;
  padding:0px;
  margin:0px;
}
body {
    height:95%;
    padding:0px;
    margin:0px;
    background-color:#1C303C;
}

footer {
    background-color:#1C303C;
    color:#FFFFA3;
    display:block;
    position:absolute;
    width:100%;
    min-height:75px;
    height:75px;
    margin:0px;
    padding:0px;
    left:0px;

}

#container {
    background-color:#FFFFFF;
    min-height:100%;
    height:100%;
    width:100%;
    top:0;
    left:0;
    margin: 0;
    padding:0;
    margin-bottom:-75px;
}