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

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

css html

Css 页面布局中的自动div高度调整,css,html,Css,Html,我试图设计一个网页使用无表布局；然而，当涉及到页面的高度时，我遇到了一些问题。我使用jqueryaccordion来最小化页面中滚动条的使用。然而，当我折叠手风琴时，我感觉到了一个div的重叠。手风琴部分与页面底部边缘重叠，也与页脚重叠。如何在不与页面中的其他div重叠的情况下自动调整页面高度如果你可以附加的图像是我的基本布局。页面的内容部分将动态填充；所以我需要使用css自动调整contents div 谢谢！恩霍提这是我制作的html代码；你能帮我改正一下吗 <!DOCTYPE

我试图设计一个网页使用无表布局；然而，当涉及到页面的高度时，我遇到了一些问题。我使用jqueryaccordion来最小化页面中滚动条的使用。然而，当我折叠手风琴时，我感觉到了一个div的重叠。手风琴部分与页面底部边缘重叠，也与页脚重叠。如何在不与页面中的其他div重叠的情况下自动调整页面高度

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

谢谢！恩霍提

这是我制作的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>

如果你有任何CSS规则在那里浮动，你会想记得清除：都在div的问题之后。如果您使用float并且没有清除它，那么应该停止重叠。您可以在链接中执行以下操作：

<br style="clear:both">

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

首先，默认情况下，如果内容超出其容器的给定高度，则通常会显示内容，因此为了正确执行滚动，应该在导航和内容div上设置overflow-y:scroll

第二，你设置了相当大的高度。页眉高120px，加上720+10页边距处的导航，顶部5页，底部5页，在页脚之前再增加50页。总共是900，这是很多。现在常见的分辨率是1280x1024，但您必须记住，浏览器占用了很多高度；可能在200px的范围内。可能是您为页面指定的高度太高

第三，在contents div上分配一个巨大的负边距有点奇怪。边距顶部的负值会将元素向上移动页面，因此您告诉浏览器要做的是将内容向上移动724px，这将使其离开屏幕顶部的一半以上。这就是你打算做的吗

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