高度为 100%-body 的粘性页脚-> 可能没有 javascript？答案

【问题标题】：Sticky footer with a height 100%-body -> possible without javascript?高度为 100%-body 的粘性页脚-> 可能没有 javascript？
【发布时间】：2013-01-12 07:59:59
【问题描述】：

我有一个关于我必须创建的布局的问题。上面的布局是我目前拥有的。当 Main-div 通过添加内容来扩展时，页脚的垂直位置会增加，这就是我想要的。但是当 main 中只有很少的内容时，页脚和屏幕的下边框之间有空间，这很难看；）我试图将页脚粘在底部。结果：当向 main 添加大量内容时，页脚位于主 div 及其内容之上 :( 有点难以解释，但我想你知道我的意思。

我想要完成的是较低的布局。主 div 应该是“screen.height - header.height - footer.height”。

这可能吗？提前致谢！

再见The_Unknown

【问题讨论】：

如果您可以尝试使用 CSS position: static 之类的东西来保持“粘性”位置。如果你有一个固定的页脚高度可能会更好，否则你的页脚会滚动。
SO 不会让我在下面发布简短的答案，所以我会在这里做。没有。
@War10ck：哦，如果有帮助的话，它的页脚会固定在它的高度上。
您要求对页面布局进行动态更改。 CSS 不允许这样做。

标签： css height footer sticky

【解决方案1】：

试试这个：

<style type="text/css">
   html,body {
      height:100%
   }

   #wrapper {
     min-height:100%;
     margin-bottom:-150px; /* negative total computed height of footer */
   }

   #footer_padding {
     height:150px; /* total computed height of footer */
   }

   #footer {
     height:100px;
     margin-top:50px;
   }
</style>    


<div id="wrapper">

   <div>some content...</div>

   <div id="footer_padding"></div>

</div>

<div id="footer"></div>

【讨论】：