如何使div扩展以填充页面,在底部留下固定数量的区域?

时间:2011-02-10 11:21:37

标签: html css

我知道如何使div扩展以填满整个页面。我的问题是我想在顶部留下一条细带,在底部留一条薄带。频带可以是y个像素。然后我希望中间的div扩展以填充剩余区域。

每当我尝试这个时,它最终都会扩展到页面底部。我可以解决的唯一原因是父DIV被设置为高度的100%,所以它从中得到它的数字。我尝试过使用边距和填充,但这没有帮助。它仍然使用父高度的100%。

1 个答案:

答案 0 :(得分:0)

我猜你想要像(this

这样的东西

快速分解:

HTML:

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

CSS

html, body {height: 100%;}
#wrap {min-height: 100%;}
#main {overflow:auto; padding-bottom: 150px;}
#footer {position: relative; margin-top: -150px; height: 150px; clear:both;}

这将在包装div的底部留下一个150px高的“页脚”,它会粘在视口的底部

哦,你需要增加保证金&amp; padding = 0到身体,否则你会看到一些讨厌的滚动条:(