html - 如何使 div 扩展以填充页面并在底部留下固定数量的区域？

Question

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

每次我尝试这样做时，它都会扩展到页面底部。我可以解决的唯一原因是父 DIV 设置为 100% 的高度，因此它从中获取其编号。我试过使用边距和填充，但这没有帮助。它仍然使用 100% 的父级高度。

Answer 1

我猜你想要类似 ( 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 的底部留下一个 150 像素高的“页脚”，它将粘在视口(viewport)的底部

哦，你需要在正文中添加 margin & padding = 0 否则你会看到一些讨厌的滚动条:(