1

很长一段时间以来，我的网页一直存在很大问题，希望能在您的帮助下找到问题的答案。我想要一个包含我的页面内容的 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 设置为溢出：自动，但这包括我不想要的内容 div 的滚动条。我错过了什么吗？我以为 min-height 会起作用，但事实并非如此！有人可能看到问题出在哪里吗？

非常感谢您的帮助。

4

2 回答 2

4

您的内容 div 位于position: absolute. 当 in 时absolute，元素退出页面的正常流程，这意味着它们不能相对于其父级放置或拉伸，只能相对于窗口放置或拉伸。

于 2012-05-02T13:45:52.393 回答
0

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

于 2012-05-23T13:09:05.263 回答