[英]div issue : height not extending with contents
我正在尝试使用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代码
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;
}
再次感谢
只需应用overflow:auto;
在#main
上使它包装其浮动子#main
。 看看左边的浮动图像更改容器div的高度
(你可以删除它的height
规则)
你已经在文档中浮动了元素,顾名思义它们意味着它们漂浮在你的'main'div之上。 因此它没有扩展。
但是很容易修复,你只需要坚持“清晰”。
你的HTML应该是这样的,注意额外的div。
<div id="main">
<div id="left">left</div>
<div id="right">right</div>
<div class="clearme"></div>
</div>
只需将以下内容添加到您的CSS中即可。
.clearme{clear:both}
更多信息可以在clear属性及其用法中找到: http : //www.tutorialhero.com/tutorial-64-css_clear_property.php
声明:本站的技术帖子网页,遵循CC BY-SA 4.0协议,如果您需要转载,请注明本站网址或者原文地址。任何问题请咨询:yoyou2525@163.com.