我正在尝试使用无表格布局设计网页；但是，当涉及到页面高度时，我遇到了问题。我使用 jquery accordion 来尽量减少页面中滚动条的使用。但是，当我折叠 Accordion 时，我遇到了 div 的重叠。 Accordion 部分与页面底部边缘重叠，也与页脚重叠。如何自动调整页面的高度而不与页面中的其他 div 重叠。
好像你可以附上图片是我制作的基本布局。页面的内容部分将被动态填充；所以我需要使用 css 自动调整内容 div
谢谢! 恩霍伊提 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>
最佳答案
如果您有任何要 float 的 CSS 规则，您需要记住在相关的 div 之后清除:both。那应该停止重叠(如果您使用的是 float 但没有清除它)。你可以做一些事情链接:
<br style="clear:both">
关于css - 页面布局中的自动div高度调整，我们在Stack Overflow上找到一个类似的问题： https://stackoverflow.com/questions/3233683/