div问题：高度不扩展与内容

我想创建一个网页使用CSS（表少），但我的主要内容区不扩展与内容请检查我的HTML和CSS代码，并给我一个解决方案，谢谢div问题：高度不扩展与内容

<!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" /> 
<link rel="stylesheet" href="style/styles.css" type="text/css" /> 
<title>::Model::</title> 
</head> 
<body> 
<div id="wrapper"> 
<div id="header"> 
header 
</div> 
<div id="main"> 
<div id="left">left</div> 
<div id="right">right</div> 
</div> 
<div id="footer"> 
footer 
</div> 

</div> 
</body> 
</html>

CSS代码

body{ 
    margin:0px; 
    padding:0px; 
    height:auto; 
} 

#wrapper{ 
    margin:0px auto; 
    width:1000px; 
} 

#header{ 
height:50px; 
border:#CCCCCC solid 1px; 
margin:2px; 
padding:5px; 
} 

#main{ 
height:auto; 
border:#CCCCCC solid 1px; 
margin:2px; 
padding:5px; 

} 

#footer{ 
height:100px; 
border:#CCCCCC solid 1px; 
margin:2px; 
padding:5px; 
} 

#left{ 
border:#CCCCCC solid 1px; 
width:640px; 
padding:4px; 
float:left; 

margin-right:2px; 

} 
#right{ 
float:right; 
padding:4px; 

border:#CCCCCC solid 1px; 
width:320px; 


}

再次感谢

来源

2010-10-14 Thomas John

你说的“不扩大”呢？垂直滚动条是否出现？ – Xion 2010-10-14 07:35:03

没有扩展意味着，高度不随内容递增 – 2010-10-14 15:53:02

刚上#main适用overflow:auto;，使其包裹它的流动儿童。就以Floating image to the left changes container div's height

一看（你可以删除其height规则）

来源

2010-10-14 07:38:37 MatTheCat

非常感谢您的大力帮助 – 2010-10-14 09:58:57

但这不适用于IE6，任何想法？ – 2010-10-14 15:52:26

您浮起您的文档，它顾名思义是指它们漂浮在你的“主”的div中的元素。因此它不是延伸。

但是容易解决，你只需要坚持以“清晰的”。

你的HTML应该是这样的，注意额外股利。

<div id="main"> 
<div id="left">left</div> 
<div id="right">right</div> 
<div class="clearme"></div> 
</div>

只需将以下内容添加到您的css。

.clearme{clear:both}

更可以在明晰产权被发现和它的使用在这里：http://www.tutorialhero.com/tutorial-64-css_clear_property.php

来源

2010-10-16 13:23:57

div问题：高度不扩展与内容

回答

相关问题