股利大小调整工作不正常

问题描述：

我写一些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>

（忽略卷曲护腕内容。它的网站编辑我们学校让我们使用）所以，当我去我的网页和类型在它重新大小，去页脚后面的内容。然而，我打算做的是在页面重新调整以适应内容时将页脚向下推。此前它的行为是这样的，那么我做错了什么？

编辑：我想我是不是第一次不够清楚，我希望父#content分度，内容主要div来调整这样页脚下推

答

的CSS？从你所有的DIV中删除所有不需要的position: absolute。使用边距来定位它们，并且您将不会遇到DIV更改大小的问题。

正如Mathew所说，当您使用position: absolute属性时，它将该元素从文档流中取出，因此它不会影响其周围的元素。你所有的DIV都是按你想要显示的顺序排列，没有必要对它们进行绝对定位。

刚拿出的定位，并与包装，让你尝试同样的事情的填充乱 - http://jsfiddle.net/n3Xqx/

答

不要使用position: absolute;，它需要的东西出来的常规文档流程。

编辑：如果你需要给页眉/页脚/内容区域之间更多的垂直间距，然后用margin

我怎么能虽然它定位绝对不一样？ – user1130772 2012-02-20 03:19:26

答

相对位置添加到包装。将位置绝对替换为内容和页脚的相对位置。见我已经更新你为什么要使用绝对位置均低于

#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; 
}

使页脚高于内容。我希望它在底部，它仍然不能解决我的问题，即'＃content-main'时'＃content'不会展开。此外，这使得我的头出来的地方，我的导航栏 – user1130772 2012-02-20 03:23:14

我忘了删除页脚和内容这就是为什么页脚是在内容上面绝对位置。我已经更新了以上的css – Dips 2012-02-20 03:54:35

在＃content-main上添加相对位置也不是绝对的，它会起作用。请参阅Jsfiddle http://jsfiddle.net/tQeDz/ – Dips 2012-02-20 03:58:22

股利大小调整工作不正常

相关推荐