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

Question

I am trying to create a web page using CSS (Table less) but my main content area is not extending with contents please check my html and css codes and give me a solutions, Thanks 我正在尝试使用CSS创建一个网页（表少）但我的主要内容区域没有扩展内容请检查我的HTML和CSS代码，并给我一个解决方案，谢谢

<!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 code 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;


}

Thanks again 再次感谢

Answer 1

Just apply overflow:auto; 只需应用overflow:auto; on #main to make it wrap its floating children. 在#main上使它包装其浮动子#main 。 Take a look on Floating image to the left changes container div's height 看看左边的浮动图像更改容器div的高度

(You can remove its height rule) （你可以删除它的height规则）

Answer 2

You have floated elements in your document, which as the name suggests means they float above your 'main' div. 你已经在文档中浮动了元素，顾名思义它们意味着它们漂浮在你的'main'div之上。 Hence it isnt extending. 因此它没有扩展。

Easy to fix however, you just need to stick a 'clear' in. 但是很容易修复，你只需要坚持“清晰”。

your html should look like this, notice the extra div. 你的HTML应该是这样的，注意额外的div。

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

And simply add the following to your css. 只需将以下内容添加到您的CSS中即可。

.clearme{clear:both}

More can be found on the clear property and its usage here: http://www.tutorialhero.com/tutorial-64-css_clear_property.php 更多信息可以在clear属性及其用法中找到： http ： //www.tutorialhero.com/tutorial-64-css_clear_property.php

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

问题描述

2 个解决方案

解决方案1
9 已采纳 2010-10-14 07:38:37

解决方案2
3 2010-10-16 13:23:57

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

问题描述

2 个解决方案

解决方案1 9 已采纳 2010-10-14 07:38:37

解决方案2 3 2010-10-16 13:23:57

解决方案1
9 已采纳 2010-10-14 07:38:37

解决方案2
3 2010-10-16 13:23:57