CSS Container/Wrapper Div 不包含所有内容？
声明：本页面是StackOverFlow热门问题的中英对照翻译，遵循CC BY-SA 4.0协议，如果您需要使用它，必须同样遵循CC BY-SA许可，注明原文地址和作者信息，同时你必须将它归于原作者（不是我）：StackOverFlow
原文地址: http://stackoverflow.com/questions/2849466/
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
Container/Wrapper Div does not contain all content?
提问by Imran
Container/Wrapper Div does not contain all content (ie all the child Div's).I've tried overflow: hidden but still doesn't work. Can someone please tell me why this is happening and what are the possible solutions.
Container/Wrapper Div 不包含所有内容（即所有子 Div 的内容）。我试过溢出：隐藏但仍然不起作用。有人可以告诉我为什么会发生这种情况以及可能的解决方案是什么。
Thank you in advance ;-)
先感谢您 ;-）
for some reason the whole code does not display??
出于某种原因，整个代码不显示？
<html>
<head>
<style type="text/css">
#wrapper {
margin:0 auto;
width: 600px;
background: yellow;
}
</style>
</head>
<body>
<div id="wrapper">
<div="header">
<h1>my beautiful site</h1>
</div>
<div id="navigation">
<ul>
<li><a href="#">Home </li>
<li><a href="#">About</li>
<li><a href="#">Services</li>
<li><a href="#">Contact us </li>
</ul>
</div>
<div id="content">
<h2> subheading </h2>
<p> long paragraph </p>
</div>
<div id="footer">
copyright 123
</div>
</div>
</body>
</html>
回答by Ray
With my crystal ball, I will predict that your child divs are floated and your container is not. In this case, the container will not expand to fit its contents. Try floating your container and see what happens.
用我的水晶球，我会预测你的孩子 div 是浮动的，而你的容器不是。在这种情况下，容器不会扩展以适应其内容。尝试浮动您的容器，看看会发生什么。
The crystal must have been dusty... However, the code you posted is not valid - you have content inside the head tag and a div outside the html tag. Is this how your page really looks, or is it just an error pasting the code into your question? Try cleaning up the code structure and see if it helps.
水晶一定是尘土飞扬......但是，您发布的代码无效 - 您在 head 标签内有内容，在 html 标签外有一个 div 。这是您的页面的真实外观，还是只是将代码粘贴到您的问题中时出错？尝试清理代码结构，看看是否有帮助。
EDIT: Found the problem - it is a typo. You have <div="header">- it should be <div id="header">(note the missing 'id')
编辑：发现问题 - 这是一个错字。你有<div="header">- 它应该是<div id="header">（注意缺少的“id”）
回答by Sarfraz
Try giving the clear:bothto the parent div or put a divat the end of it:
尝试给clear:both父 div 或div在它的末尾放一个：
<style type="text/css">
.clear{clear:both;}
</style>
Possibility One:
可能性一：
<div id="parent">
<div id="child1">Some Content</div>
<div id="child2">Some Content</div>
<div id="child3">Some Content</div>
<div class="clear"></div>
</div>
Possibility Two:
可能性二：
<div id="parent" class="clear">
<div id="child1">Some Content</div>
<div id="child2">Some Content</div>
<div id="child3">Some Content</div>
</div>
回答by Moak
A great tool:http://validator.w3.org/- this will tell you if there is markup errors and on what lines.
一个很棒的工具：http : //validator.w3.org/- 这将告诉您是否存在标记错误以及在哪些行。
回答by jacr1614
You can add this css to the parent div:
您可以将此 css 添加到父 div：
.parent-div{overflow:auto;clear:both;}
.parent-div{overflow:auto;clear:both;}
And check if some of the inner elements have floats or have some height restrictions, sometimes that is a problem.
并检查一些内部元素是否有浮动或有一些高度限制，有时这是一个问题。
回答by Nicolas Viennot
<h2> subheading<h2>
You miss a /
你错过了 /
回答by Nicolas Viennot
You have a DIV in your HEAD element.
您的 HEAD 元素中有一个 DIV。
回答by Aniket Palve
By default floating elements will not be included in the div.
默认情况下，div 中不会包含浮动元素。
Try overflow:auto in the parent div. This will make the parent div contain the floating elements as well.
在父 div 中尝试溢出：自动。这将使父 div 也包含浮动元素。
