Css 调整Div大小不正确_Css_Html_Resize

Css 调整Div大小不正确

css html

Css 调整Div大小不正确,css,html,resize,Css,Html,Resize,我正在为一个类似这样的学校网站编写css代码 body{ background:#000099 url('repeat.png') repeat-x; margin-bottom:50px; } div.wsite-theme{ background-color:#FFFFFF; border-top:5px solid #AAAAAA; } div.wsite-header{ background:#DDDDDD; border-radius:5px; } #wrapper { wi

我正在为一个类似这样的学校网站编写css代码

body{
background:#000099 url('repeat.png') repeat-x;
margin-bottom:50px;
}



div.wsite-theme{
background-color:#FFFFFF;
border-top:5px solid #AAAAAA;
}

div.wsite-header{
background:#DDDDDD;
border-radius:5px;
}

#wrapper {
width:960px;
margin:0pt auto;
}

#content{
width:850px;
min-height:694px;
position:absolute;
left:98px;
top:150px;
}

#content-main{
width:100%;
min-height:594px;
position:absolute;
top:0px;
}

#navigation{
min-height:1px;
position:absolute;
left:98px;
top:90px;
line-height:2px;
padding:10px 10px;
width:850px;
}

#header{
width:850px;
height:150px;
position:absolute;
top:5px;
left:98px;
}

#footer{
width:100%;
height:100px;
background:#DDDDDD;
position:absolute;
bottom:0px;
border-top:5px solid #AAAAAA;
}

使用如下所示的html：

<html>
<head>
<title>{title}</title>
<link rel="stylesheet" type="text/css" href="main-style.css" />
</head>
<body>
<div id="wrapper">
<div id="header" class="wsite-header">
<h1 class="title1">{title}</h1>
</div>
<div id="navigation">
{menu}
</div>
<div id="content">
<div id="content-main" class="wsite-theme">
{content}
</div>
<div id="footer">
{footer}
</div>
</div>
</div>
</body>
</html>


{title}
{title}
{menu}
{content}
{footer}

（忽略大括号中的内容。这是我们学校让我们使用的网站编辑器）因此，当我在页面上输入内容时，它会重新调整大小并放在页脚后面。然而，我打算让它做的是在页脚重新调整大小以适应内容时向下推页脚。早些时候它是这样的，那么我做错了什么

编辑：我想我一开始还不够清楚，我希望父级

#content

div与content main div一起调整大小，以便页脚被向下推

不要使用

位置：绝对，它将常规文档流中的内容去掉
编辑：如果需要在页眉/页脚/内容区域之间提供更多的垂直间距，则使用边距添加相对于包装的位置。
将内容和页脚的绝对位置替换为相对位置。
看，我已经更新了下面的CSS
#wrapper {
width:960px;
margin:0pt auto;
position:relative;
}

#content{
width:850px;
min-height:694px;
left:98px;
top:150px;
position:relative;
}
#content-main{
width:100%;
min-height:594px;
position:relative;
top:0px;
}
#footer{
width:100%;
height:100px;
background:#DDDDDD;
bottom:0px;
border-top:5px solid #AAAAAA;
position:relative;
}

你为什么要用绝对位置？从所有div中删除所有位置：绝对，它们不是必需的。相反，使用边距定位它们，就不会有div改变大小的问题
正如Mathew所提到的，当您使用position:absolute
属性时，它会将该元素从文档流中移除，因此不会影响其周围的元素。您所有的div都按照您希望的顺序显示，不需要在其中任何一个上进行绝对定位
只需取出定位并弄乱包装的填充物，就可以得到与您尝试的相同的东西-
如何在没有绝对的情况下将其定位相同？这会使页脚位于内容上方。我希望它位于底部，但它仍然无法解决我的问题，即#content
在#content main
展开时不会展开。这也使得我的页眉不合适，我的导航栏忘记了删除页脚和内容上的绝对位置，这就是为什么页脚位于内容的顶部。我已经更新了css上面的添加位置相对在#内容主也不是绝对，然后它将工作。请参见JSFIDLE上的