粘性页脚高度为100％ - 体 - >没有javascript可能吗？

Question

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

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

这可能吗？提前谢谢！

Bye The_Unknown

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>