如何删除悬垂的div
如何删除悬垂的div
提问于 2012-04-26 20:16:14
我有以下css和html文件：
body{
text-align: center;
background-color: #eeeeee;
margin: 0;
padding: 0;
font-size: 1em;
font-family: Helvetica,Arial,sans-serif;
}
#wrapper{
margin: 0 auto;
width:900px;
border: 1px solid #cccccc;
background-color:#ffffff;
padding:5px;
}
#banner{
width:900px;
height: 150px;
background-image: url("../images/logo.png");
background-repeat: no-repeat;
}
#separator{
width:100%;
height: 5px;
border: 1px solid #993311;
background-color: #993300;
}
#navbar{
height:25px;
width: 100%;
background-color: #434a4f;
}
#topsearch{
height:25px;
width: 100%;
background-color: #434a4f;
}
#breadcrumb{
float:left;
width: 30%;
background-color: #cccccc;
}
#search{
float:left;
width:70%;
background-color: #fccfcf;
}
#main{
clear: both;
}
#mainleft{
float:left;
width: 21%;
background-color: #ff0000;
}
#maincenter{
float:left;
width: 58%;
background-color: #00ff00;
}
#mainright{
float:left;
width: 21%;
background-color: #0000ff;
}
#mainright1{
width: 100%;
height:20%;
background-color: #0000ff;
}
#mainright2{
clear:both;
width:100%;
height: 21%;
background-color: #0000ff;
}
#footer{
clear: :both;
width: :100%;
background-color: #333333;
}和
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="utf-8" />
<meta http-equiv="X-UA-Compatible" content="IE=edge,chrome=1" />
<title>test</title>
<meta name="description" content="" />
<meta name="generator" content="Studio 3 http://aptana.com/" />
<meta name="author" content="byteslash" />
<meta name="viewport" content="width=device-width; initial-scale=1.0" />
<link href="css/template.css" type="text/css" rel="stylesheet"/>
</head>
<body>
<div id="wrapper">
<div id="banner"></div>
<div id="separator"></div>
<div id="navbar">
NavBar
</div>
<div id="topsearch">
<div id="breadcrumb">Breadcrumb</div>
<div id="search">SearchBox</div>
</div>
<div id="main">
<div id="mainleft">
MainLeft
</div>
<div id="maincenter">
MainCenter
</div>
<div id="mainright">
<div id="mainright1">MainRight1</div>
<div id="mainright2">MainRight2</div>
</div>
</div>
<div id="footer">
<h6>Footer</h6>
</div>
</div>
</body>
</html>如果您检查颜色，我让mainright2在mainright1顶部显示为蓝色，这是预期的，但mainright2挂在页脚顶部。
我认为解决这个问题的一种方法是以某种方式使div main解释其子函数中定义的所有高度，但我不知道如何解决。
回答 3
Stack Overflow用户
回答已采纳
发布于 2012-04-26 20:22:02
这是因为你的div的高度是0px --它的所有内容都是floating的。有很多方法可以解决这个问题，其中之一是将overflow: hidden应用于#main div，如下所示：
#main{
overflow: hidden;
clear: both;
}Stack Overflow用户
发布于 2012-04-26 20:25:31
您的#footer样式中存在错误
clear: :both;去掉第二个冒号。
Edit:和另一个，但那个没有那么糟糕，因为默认情况下div的宽度是100%。
Stack Overflow用户
发布于 2012-04-26 20:19:09
在页脚和主容器之间添加<div style="clear:both;"></div>。
页面原文内容由Stack Overflow提供。腾讯云小微IT领域专用引擎提供翻译支持
原文链接：
https://stackoverflow.com/questions/10333199
复制相关文章
相似问题
腾讯云开发者
Copyright © 2013 - 2026 Tencent Cloud. All Rights Reserved. 腾讯云 版权所有
深圳市腾讯计算机系统有限公司 ICP备案/许可证号：粤B2-20090059 
粤公网安备44030502008569号
腾讯云计算（北京）有限责任公司 京ICP证150476号 | 京ICP备11018762号