Question

我正在尝试使用无表格布局设计网页;但是，当涉及到页面的高度时，我遇到了问题。我使用jquery手风琴来最小化页面中滚动条的使用。然而，当我折叠手风琴时，我正在经历div的重叠。手风琴部分与页面的底部边缘重叠并且也与页脚重叠。如何在不重叠页面中其他div的情况下自动调整页面高度。

好像你可以附加的图像是我做的基本布局。页面的内容部分将动态填充;所以我需要使用css

自动调整内容div

谢谢！ Nhoyti alt text http://img13.imageshack.us/img13/9438/layoutfq.jpg

这是我制作的HTML代码;能帮我解决一下吗？

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=UTF-8" />
<title>Untitled Document</title>
<style type="text/css">
html, body
{
    margin:0px;
    padding:0px;
    }

#pageholder
{
    width:980px;
    margin-left:auto;
    margin-right:auto;
    text-align:center;
    border:solid 1px #000;
    }

#header
{
    width:978px;
    height:120px;
    border:solid 1px red;
    text-align:center;
    }

#navigation
{
    width:200px;
    height:720px;
    margin:5px;
    border:solid 1px cyan;
    text-align:center;
    }


#contents
{
    width:700px;
    height:720px;
    margin:5px;
    margin-left:270px;
    margin-top:-724px;
    border:solid 1px blue;
    text-align:center;
    }

#footer
{
    width:970px;    
    height:50px;
    border:solid 1px green;
    text-align:center;
}
</style>
</head>

<body>
<div id="pageholder">

<div id="header">header</div>
<div id="navigation">navigation</div>
<div id="contents">contents</div>
<div id="footer">footer</div>

</div>
</body>
</html>

Answer 1

如果您有任何CSS规则要浮动，您将需要记住清除：两者都在div之后。这应该会阻止重叠（如果你使用浮动并且没有清除它）。你可以做一些链接：

<br style="clear:both">

Answer 2

在处理页面高度时，请记住以下几点：

首先，默认情况下，如果内容超出其容器的给定高度，则通常会显示内容，因此要正确强制滚动，您应该在#navigation和#content div上使用overflow-y:scroll。

其次，你设置了相当高的高度。标题是120px高，加上导航在720 + 10边距（5顶部，5底部），在页脚之前增加50.这总计900，这是很多。现在常见的解决方案是1280x1024，但你必须记住，浏览器占用了很多高度;可能在200px的范围内。你可能为页面分配了太多的高度。

第三，在#contents div上分配一个巨大的负边缘顶部有点奇怪。 margin-top的负值会将元素向上移动，因此您告诉浏览器要做的是将#contents向上移动724px，这应该使它超过屏幕顶部的一半。那是你打算做的吗？

最后，通常不需要在容器上指定高度。默认情况下，完全没有高度样式，浏览器足够智能，使您的容器大小合适，而不是重叠。您可能需要做的就是删除#contents和#navigation上的高度和负边距顶部样式以解决您的问题，除非您确实需要导航或内容完全达到该高度。

页面布局中的自动div高度调整

2 个答案: