Html div 在标题周围折叠
声明：本页面是StackOverFlow热门问题的中英对照翻译，遵循CC BY-SA 4.0协议，如果您需要使用它，必须同样遵循CC BY-SA许可，注明原文地址和作者信息，同时你必须将它归于原作者（不是我）：StackOverFlow
原文地址: http://stackoverflow.com/questions/600890/
Warning: these are provided under cc-by-sa 4.0 license. You are free to use/share it, But you must attribute it to the original authors (not me):
StackOverFlow
divs collapsing around header
提问by JohnIdol
I have a few nested divs:
我有几个嵌套的 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>
- wrapper style:
width: 780px; margin: 20px auto; border: solid black 5px; - header style:
position: relative; min-height: 125px; - body style:
position: relative; - content style:
position: absolute; left: 50px; top: 0px;
- 包装样式：
width: 780px; margin: 20px auto; border: solid black 5px; - 标题样式：
position: relative; min-height: 125px; - 身材：
position: relative; - 内容风格：
position: absolute; left: 50px; top: 0px;
I have a bunch of html elements in the content div and for some reason the body div and the wrapper div are collapsing around the header and the content div hangs out on its own if I don't set a fixed height for the body div. The only float elements I have are in the header.
我在内容 div 中有一堆 html 元素，出于某种原因，主体 div 和包装器 div 在标题周围折叠，如果我没有为主体 div 设置固定高度，则内容 div 会自行悬挂。我唯一的浮动元素在标题中。
EDIT:
编辑：
If I remove the content div (and drop the html elements directly in body) the body div stops collapsing! Trying to understand why - guess it's due to the position: absolute of the content div.
如果我删除内容 div（并将 html 元素直接放在 body 中），则 body div 将停止折叠！试图理解为什么 - 猜测这是由于位置：内容 div 的绝对值。
Any clue why this is happening and how to solve?
任何线索为什么会发生这种情况以及如何解决？
I had a look at this questionbut It doesn't seem to work for me (or maybe I am clearing inthe wrong place...).
我看过这个问题，但它似乎对我不起作用（或者我可能在错误的地方清理......）。
采纳答案by garrow
You don't really need to use absolute or relative positioning in this case.
在这种情况下，您实际上不需要使用绝对或相对定位。
The following achieves what you need with a minimal amount of css wrangling.
Colours becuase I like colour, and so should you!
以下内容以最少的 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>
回答by cletus
Try this. Note: the overflow hidden on the header div solves the need for a clearing div. Note sure why you're using relative+absolute positioning for the content though. That's better handled with margins imho.
尝试这个。注意：隐藏在标题div上的溢出解决了清除div的需要。请注意为什么要对内容使用相对+绝对定位。恕我直言，用边距更好地处理。
<html>
<head>
<title>Layout</title>
<style type="text/css">
#wrapper { width: 780px; margin: 20px auto; border: solid black 5px; }
#header { overflow: hidden; background-color: yellow; }
#header div { float: right; border: 2px solid red; }
#body { position: relative; }
#content { position: absolute; left: 50px; top: 0px; }
</style>
</head>
<body>
<div id="wrapper">
<div id="header">
<div>One</div>
<div>Two</div>
<div>Three</div>
</div>
<div id="body">
<div id="content">
<p>This is some text</p>
</div>
</div>
</div>
</body>
</html>
回答by random
If you want #content to show up within the border boundaries of #wrapper try this swap on for size, after you remove position:relativefrom #body (or remove that DIV entirely):
如果您希望 #content 显示在 #wrapper 的边界边界内，请在position:relative从 #body 中删除（或完全删除该 DIV）后尝试此交换大小：
#header{position: relative; overflow:hidden; clear:both;}
#content{position:relative; left:50px; top:0px;}
That way you will be able to see #content show up within the wrapper but beneath #header.
这样，您将能够看到#content 显示在包装器中但在#header 下方。
May be happening because there really isn't anything for #content to stick out from under. #header, when it was set to relative, kind of disappears for the below, even if #body was then set to absolute with descendants of it set to relative.
可能会发生，因为#content 真的没有任何东西可以从下面伸出来。#header，当它被设置为relative 时，下面的就消失了，即使#body 被设置为absolute 并且它的后代被设置为relative。
Changing up #content from position:absoluteto position:relativewill have it come under the previous DIV, which in this case was #header.
将#content 更改为position:absolutetoposition:relative将使其位于先前的DIV 下，在本例中为#header。
回答by Guffa
I use this style for clearing elements:
我使用这种风格来清除元素：
.Clear { clear: both; height: 0; overflow: hidden; }
Place a clearing div in the header, to give the header element size:
在标题中放置一个清除 div，以给出标题元素的大小：
<div id="wrapper">
<div id="header">
<!-- a bunch of float divs here -->
<div class="Clear"></div>
</div>
<div id="body">
<div id="content">
<!-- a bunch of html controls here -->
</div>
</div>
</div>
Setting the height of the clearing element to zero causes it to take up no space by itself. The overflow style is so that IE will not give it a height eventhough the height is set to zero. IE has a strange idea that every element has to be at least one character high, setting overflow:hidden; keeps the height at zero eventhough the content of the element is one character high in IE.
将清除元素的高度设置为零会使其本身不占用空间。溢出样式使 IE 不会给它一个高度，即使高度设置为零。IE 有一个奇怪的想法，即每个元素必须至少高一个字符，设置溢出：隐藏；即使元素的内容在 IE 中高一个字符，也将高度保持为零。
回答by Allan
I'm not a fan of using "clear:both" if it's not totally needed. A better solution is setting the "overflow" property of the collapsing DIV to "auto".
如果不是完全需要，我不喜欢使用“clear:both”。更好的解决方案是将折叠 DIV 的“溢出”属性设置为“自动”。
Try something like:
尝试类似：
#header { float: left; overflow: auto; }
#header { float: left; overflow: auto; }
回答by Zack The Human
Try clearing after your floated elements withinthe header.
尝试在标题中的浮动元素之后清除。
<div id="wrapper">
<div id="header">
<!-- a bunch of float divs here -->
<div style="clear:both;"></div> <!-- Or use a clearfix... -->
</div>
<div id="body">
<div id="content">
<!-- a bunch of html controls here -->
</div>
</div>
</div>
As long as the clearing element is within the containing div it should accomplish what you want.
只要清除元素在包含的 div 内，它就应该完成你想要的。
回答by Stiropor
Add style "clear: both" to your div with "body" id. You could also add a div with this style just after "bunch of float divs" and before closing tag of header div.
将样式“clear: both”添加到带有“body”ID的div中。您还可以在“一堆浮动 div”之后和标题 div 的结束标记之前添加具有这种样式的 div。
回答by Alex
When you want to clear something you also need to float that element to make it work properly. So you will need.
当您想清除某些内容时，您还需要浮动该元素以使其正常工作。所以你会需要。
#header { clear: both; float: left; }
#body { clear: both; float: left; }
