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

Question

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

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

这可能吗？提前致谢！

再见_未知

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