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

Question

我对必须创建的布局有疑问。上层布局是我目前的布局。当 Main-div 通过向其添加内容而扩展时，页脚的垂直位置会增加，这正是我想要的。但是当 main 中只有很少的内容时，页脚和屏幕下边框之间会有空间，这很丑陋；)我试图将页脚粘在底部。结果:当向 main 添加很多内容时，页脚位于主 div 及其内容之上:( 有点难以解释，但我想你知道我的意思。

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

这可能吗？提前致谢!

再见了_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>