CSS 使 div 的高度随其内容而扩展
声明：本页面是StackOverFlow热门问题的中英对照翻译，遵循CC BY-SA 4.0协议，如果您需要使用它，必须同样遵循CC BY-SA许可，注明原文地址和作者信息，同时你必须将它归于原作者（不是我）：StackOverFlow
原文地址: http://stackoverflow.com/questions/1709442/
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
make div's height expand with its content
提问by patrick
I have these nested divs and I need the main container to expand (in height) to accommodate the DIVs inside
我有这些嵌套的 div，我需要主容器扩展（在高度上）以容纳里面的 DIV
<!-- head -->
...
<!-- /head -->
<body?class="main">
<div?id="container">
<div?id="header">
<!--series of divs in here, graphic banner etc. -->
</div>
<div?id="main_content"> <!-- this DIV _should_ stretch to accommodate inner divs -->
<div?id="items_list"?class="items_list ui-sortable">
<div id="item_35" class="item_details">
</div>
<div id="item_36" class="item_details">
</div>
<div id="item_37" class="item_details">
</div>
<!-- this list of DIVs "item_xx" goes on for a while
each one representing a photo with name, caption etcetc -->
</div>
</div>
<br class="clear"/>
<div id="footer">
</div>
</body>
</html>
CSS is this:
CSS是这样的：
* {
padding: 0;
margin: 0;
}
.main {
font: 100% Verdana, Arial, Helvetica, sans-serif;
background: #4c5462;
margin: 0;
padding: 0;
text-align: center;
color: #000000;
}
.main #container {
height: auto;
width: 46em;
background: #4c5462;
margin: 0 auto;
border: 0px solid #000000;
text-align: left;
}
.main #main_content {
padding: 5px;
margin: 0px;
}
#items_list {
width: 400px;
float: left;
}
.items_list {
width: 400px;
float: left;
}
.item_details {
margin-top: 3px;
margin-bottom: 3px;
padding: 3px;
float: left;
border-bottom: 0.5px solid blue;
}
The problem I have is that #main_contentdoesn't stretch to accommodate all the inner divs, with the result that they keep going against the background.
我#main_content遇到的问题是不能拉伸以容纳所有内部 div，结果它们一直在背景中移动。
How can I solve this problem considering the above scenario?
考虑到上述情况，我该如何解决这个问题？
采纳答案by jennyfofenny
You need to force a clear:bothbefore the #main_contentdiv is closed. I would probably move the <br class="clear" />;into the #main_contentdiv and set the CSS to be:
您需要clear:both在#main_contentdiv 关闭之前强制 a 。我可能会移动<br class="clear" />;到#main_contentdiv 并将 CSS 设置为：
.clear { clear: both; }
Update:This question still gets a fair amount of traffic, so I wanted to update the answer with a modern alternative using a new layout mode in CSS3 called Flexible boxes or Flexbox:
更新：这个问题仍然有相当多的流量，所以我想用一个现代的替代方案来更新答案，使用CSS3 中的一种新的布局模式，称为弹性框或 Flexbox：
body {
margin: 0;
}
.flex-container {
display: flex;
flex-direction: column;
min-height: 100vh;
}
header {
background-color: #3F51B5;
color: #fff;
}
section.content {
flex: 1;
}
footer {
background-color: #FFC107;
color: #333;
}<div class="flex-container">
<header>
<h1>
Header
</h1>
</header>
<section class="content">
Content
</section>
<footer>
<h4>
Footer
</h4>
</footer>
</div>Most modern browsers currently support Flexboxand viewport units, but if you have to maintain support for older browsers, make sure to check compatibility for the specific browser version.
大多数现代浏览器目前都支持Flexbox和viewport units，但如果您必须保持对旧浏览器的支持，请确保检查特定浏览器版本的兼容性。
回答by sip?cz péter
Try this:
overflow: auto;
尝试这个：
overflow: auto;
It worked for my problem..
它适用于我的问题..
回答by Nick
add the following:
添加以下内容：
overflow:hidden;
height:1%;
to your main div. Eliminates the need for the extra <br />for the clear.
到您的主要 div。消除了<br />对清晰的额外需求。
回答by h0mayun
回答by Charles
I would just use
我只会用
height: auto;
in your div. Yes, I know I'm a-little late but I figured this might help somebody like it would have helped me if it was here.
在你的 div 中。是的，我知道我有点晚了，但我认为这可能会帮助某人，就像如果它在这里会帮助我一样。
回答by Steerpike
Thw following should work:
Thw以下应该工作：
.main #main_content {
padding: 5px;
margin: 0px;
overflow: auto;
width: 100%; //for some explorer browsers to trigger hasLayout
}
回答by Daniel Beltrami
Very simple way
很简单的方法
On parent DIV:
在父 DIV 上：
height: 100%;
height: 100%;
This work for me every time
每次都为我工作
回答by dark marc
Use the span tag with display:inline-blockcss attached to it. You can then use CSS and manipulate it like a div in lots of ways but if you don't include a widthor heightit expands and retracts based on its content.
使用display:inline-block附加了css的 span 标签。然后，您可以使用 CSS 并以多种方式像 div 一样操作它，但是如果您不包含 awidth或height它会根据其内容展开和收缩。
Hope that helps.
希望有帮助。
回答by Ifti Mahmud
This problem arises when the Child elements of a Parent Div are floated. Here is the Latest Solutionof the problem:
当父 Div 的子元素浮动时会出现此问题。这是问题的最新解决方案：
In your CSS file write the following class called .clearfixalong with the pseudo selector :after
在您的 CSS 文件中编写以下名为.clearfix 的类以及伪选择器：after
.clearfix:after {
content: "";
display: table;
clear: both;
}
Then, in your HTML, add the .clearfixclass to your parent Div. For example:
然后，在您的 HTML 中，将.clearfix类添加到您的父 Div。例如：
<div class="clearfix">
<div></div>
<div></div>
</div>
It should work always. You can call the class name as .groupinstead of .clearfix, as it will make the code more semantic. Note that, it is Not necessary to add the dot or even a space in the value of Contentbetween the double quotation "". Also, overflow: auto;might solve the problem but it causes other problems like showing the scroll-bar and is not recommended.
它应该始终有效。你可以调用类的名称。集团而不是.clearfix，因为它使代码更语义。注意，双引号""之间的Content值不需要加点号甚至空格。另外，溢出：自动；可能会解决问题，但会导致其他问题，例如显示滚动条，不推荐使用。
Source: Blog of Lisa Catalano and Chris Coyier
来源：Lisa Catalano 和 Chris Coyier 的博客
回答by David says reinstate Monica
Typically I think this can be resolved by forcing a clear:bothrule on the last child-element of the #items_list.
通常我认为这可以通过clear:both在#items_list.
You can either use:
您可以使用：
#items_list:last-child {clear: both;}
Or, if you're using a dynamic language, add an additional class to the last element generated in whatever loop creates the list itself, so you end up with something in your html like:
或者，如果您使用的是动态语言，请向在任何循环中生成的最后一个元素添加一个额外的类来创建列表本身，因此您最终会在您的 html 中得到一些内容，例如：
<div id="list_item_20" class="last_list_item">
and css
和CSS
.last_list_item {clear: both; }
