我有一些嵌套的div:
<div id="wrapper">
<div id="header">
<!-- a bunch of float divs here -->
</div>
<div id="body">
<div id="content">
<!-- a bunch of html controls here -->
</div>
</div>
</div>
width: 780px; margin:
20px auto; border: solid black 5px;position: relative;
min-height: 125px;position: relative;position: absolute;
left: 50px; top: 0px;我在内容div中有一堆html元素,由于某种原因,body div和包装div在标题周围折叠,如果我没有为body div设置固定高度,内容div会自行挂起.我唯一的浮动元素在标题中.
编辑:
如果我删除内容div(并直接在主体中删除html元素),主体div将停止折叠!试图理解为什么 - 猜测它是由于位置:内容div的绝对值.
任何线索为什么会发生这种情况以及如何解决？
我看了这个问题,但它似乎对我没用(或者我可能在错误的地方清理......).
在这种情况下，您实际上不需要使用绝对或相对定位。
以下内容通过最少的 css 处理实现了您所需要的。
颜色因为我喜欢颜色，你也应该如此！
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN"
"http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
<html>
<head>
<meta http-equiv="Content-type" content="text/html; charset=utf-8" />
<title>Page Title</title>
<style type="text/css" media="screen">
#wrapper {
width: 780px;
margin: 20px auto;
border: solid black 5px;
}
#header {
min-height: 125px;
overflow:hidden;
}
#body {
background-color:red;
}
#content {
margin-left: 50px;
margin-top: 0px;
background-color:pink;
}
.floatie { float:left; width:40px; height :40px;
margin:5px; background-color:#fe0;}
</style>
</head>
<body>
<div id="wrapper">
<div id="header">
<div class="floatie"></div>
<div class="floatie"></div>
<div class="floatie"></div>
<div class="floatie"></div>
<div class="floatie"></div>
<div class="floatie"></div>
<div class="floatie"></div>
</div>
<div id="body">
<div id="content">
<p>Lorem ipsum dolor sit amet, consectetur adipisicing elit,
sed do eiusmod tempor incididunt ut labore et dolore
magna aliqua. Ut enim ad minim veniam, quis nostrud
exercitation ullamco laboris nisi ut aliquip ex ea
commodo consequat. Duis aute irure dolor in
reprehenderit in voluptate velit esse cillum dolore eu
fugiat nulla pariatur. Excepteur sint occaecat
cupidatat non proident, sunt in culpa qui officia
deserunt mollit anim id est laborum.</p>
</div>
</div>
</div>
</body>
</html>