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

我试图设计一个使用无表格布局的网页;但是，当涉及到页面的高度时，我遇到了问题。我使用jquery手风琴来尽量减少页面中滚动条的使用。但是，当我折叠手风琴时，我正在经历div的重叠。手风琴部分与页面的底部边缘重叠并与页脚重叠。我如何自动调整页面的高度，而不会与页面中其他div的重叠。页面布局中的自动div高度调整

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

谢谢！ 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>

来源

2010-07-13 nhoyti

如果你有任何CSS规则在那里漂浮，你会想记住清除：在div的问题之后。这应该停止重叠（如果你使用浮动，并没有清除它）。你可以做一些链接：

<br style="clear:both">

来源

2010-07-13 02:15:50 John

有几件事情要记住，当你处理的页面高度：

首先，默认情况下，内容通常会显示，如果它延伸超过其容器的给定高度，为了正确执行滚动操作，您应该在#navigation和#content div上有overflow-y:scroll。

其次，你设置了相当高的一点。标题为120px高，再加上720 + 10页边距（5顶部，5底部）的导航栏，在页脚之前增加了50个页面。总共900页，这是一个很好的例子。目前常见的解决方案是1280x1024，但您必须记住浏览器吃了很多高度;大概在200px的区域。您可能会在页面上分配太多高度。

第三，在#contents div上分配一个大量的负边距是有点奇怪的。 margin-top的负值会将页面元素向上移动，因此您要告诉浏览器执行的操作是将#contents向上移动724px，这应该会将其放在屏幕顶部一半以上。那是你打算做什么的？

最后，通常不需要指定容器的高度。默认情况下，根本没有高度样式，浏览器足够聪明，可以使容器尺寸合适并且不会重叠。您可能需要删除#contents和#navigation上的高度和负边距顶端样式，以解决您的问题，除非您确实需要导航或内容完全达到此高度。

来源

2010-07-13 03:29:28

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

回答

相关问题