Question

我的网页已经存在很长时间了，我希望能在你的帮助下找到问题的答案。我想要一个div，其中包含我的页面内容（长度根据各个页面而变化）以拉伸页面的长度，但它只会延伸窗口的长度。这是HTML和CSS：

HTML（我只包括非常基本的结构）：

<html>
<body>
<div class="container">
<div id="content">
<div id="..."></div>
<div id="..."></div>
<div id="..."></div>
<div id="..."></div>
</div>
</div>
</body>
</html>`

CSS：

html, body {
height: 100%;
font-family: Arial;
font-size: 10px;
color: #000000;
background: #FFF url(../../images/body.png) no-repeat center 40px;
margin: 0;
position: relative;}

.container {
height: 100%;
width: 960px;
margin-right: auto;
margin-left: auto;
position: relative;}

#content  {
width: 939px;
min-height: 100%;
position: absolute;
top: 210px;
left: 6px;
box-shadow: 0px 0px 8px #666;
-moz-box-shadow: 0px 0px 8px #666;
-webkit-box-shadow: 0px 0px 8px #666;
background-color: #FFF;}

我尝试将内容div设置为overflow：auto，但是包含我不想要的内容div的滚动条。我错过了什么吗？我认为最小高度会起作用，但事实并非如此！有人可能会看到问题所在吗？

非常感谢您的帮助。

Answer 1

您的内容div位于position: absolute。在absolute中，元素退出页面的正常流程，这意味着它们无法相对于父项放置或拉伸，只能相对于窗口。

Answer 2

尝试将bottom: 0;添加到内容div。这个对我有用。在我的一个项目中，我的布局非常相似。

Div仅延伸到浏览器窗口高度，而不是页面高度

2 个答案: