CSS div的自动高度
声明：本页面是StackOverFlow热门问题的中英对照翻译，遵循CC BY-SA 4.0协议，如果您需要使用它，必须同样遵循CC BY-SA许可，注明原文地址和作者信息，同时你必须将它归于原作者（不是我）：StackOverFlow
原文地址: http://stackoverflow.com/questions/6857078/
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
Auto height of div
提问by Tural Ali
Browser shows div only when I set exact height. But i want to create resizable div according it's contents. Tried height: auto and height:100%. It doesn't help.
浏览器仅在我设置精确高度时才显示 div。但我想根据它的内容创建可调整大小的 div。尝试高度：自动和高度：100%。它没有帮助。
My div looks like that. It's background div of sidebars and content.
我的 div 看起来像那样。它是侧边栏和内容的背景 div。
.wrapper
{
width: 80%;
height:200px;
max-width: 1260px;
min-width: 780px;
margin: 0 auto;
background-image:url(core/design/img/transfff.png);
-moz-border-radius: 15px 15px 0px 0px;
border-radius: 15px 15px 0px 0px;
}
UPDATEmy html looks like that
更新我的 html 看起来像这样
<!DOCTYPE HTML>
<html>
<head>
<meta charset="utf-8">
<title>Untitled Document</title>
<style type="text/css">
body {
font: 100%/1.4 Verdana, Arial, Helvetica, sans-serif;
background-image: url(core/design/img/bg.png);
background-position:top left;
background-size:100%;
background-color:#fff;
background-repeat:no-repeat;
margin: 0;
padding: 0;
color: #000;
}
ul, ol, dl {
padding: 0;
margin: 0;
}
h1, h2, h3, h4, h5, h6, p {
margin-top: 0;
padding-right: 15px;
padding-left: 15px;
a img {
border: none;
}
a:link {
color:#414958;
text-decoration: underline;
}
a:visited {
color: #4E5869;
text-decoration: underline;
}
a:hover, a:active, a:focus {
text-decoration: none;
}
.container {
width: 80%;
max-width: 1260px;
min-width: 780px;
margin: 0 auto;
}
.wrapper
{
width: 80%;
height:200px;
max-width: 1260px;
min-width: 780px;
margin: 0 auto;
background-image:url(core/design/img/transfff.png);
-moz-border-radius: 15px 15px 0px 0px;
border-radius: 15px 15px 0px 0px;
overflow: visible
}
.header {
padding:20px;
}
.sidebar1 {
float: left;
width: 20%;
padding-bottom: 10px;
}
.content {
padding: 10px 0;
width: 60%;
float: left;
}
.sidebar2 {
float: left;
width: 20%;
padding: 10px 0;
}
.content ul, .content ol {
padding: 0 15px 15px 40px;
}
ul.nav {
list-style: none;
border-top: 1px solid #666;
margin-bottom: 15px;
}
ul.nav li {
border-bottom: 1px solid #666;
}
ul.nav a, ul.nav a:visited{
padding: 5px 5px 5px 15px;
display: block;
text-decoration: none;
color: #000;
}
ul.nav a:hover, ul.nav a:active, ul.nav a:focus {
background: #6F7D94;
color: #FFF;
}
/* ~~The footer ~~ */
.footer {
padding: 10px 0;
position: relative;
clear: both;
}
.fltrt {
float: right;
margin-left: 8px;
}
.fltlft {
float: left;
margin-right: 8px;
}
.clearfloat { /
clear:both;
height:0;
font-size: 1px;
line-height: 0px;
}
-->
</style><!--[if lte IE 7]>
<style>
.content { margin-right: -1px; } /* this 1px negative margin can be placed on any of the columns in this layout with the same corrective effect. */
ul.nav a { zoom: 1; } /* the zoom property gives IE the hasLayout trigger it needs to correct extra whiltespace between the links */
</style>
<![endif]--></head>
<body>
<div class="container">
<div class="header"><a href="#"><img src="core/design/img/logo.png" alt="Insert Logo Here" name="Insert_logo" width="438px" height="95" id="Insert_logo" style=" display:block; margin:0 auto;" /></a>
<!-- end .header --></div>
<div class="wrapper">
<div class="sidebar1">
</div>
<div class="content">
</div>
<div class="sidebar2">
</div>
</div>
<div class="footer">
</div>
</div>
</body>
</html>
回答by Jamie Dixon
div's will naturally resize in accordance with their content.
div's 将根据其内容自然地调整大小。
If you set no height on your div, it will expand to contain its conent.
如果您没有在 div 上设置高度，它将扩展以包含其内容。
An exception to this rule is when the div contains floating elements. If this is the case you'll need to do a bit extra to ensure that the containing div (wrapper) clears the floats.
此规则的一个例外是当 div 包含浮动元素时。如果是这种情况，您需要做一些额外的工作以确保包含的 div（包装器）清除浮动。
Here's some ways to do this:
这里有一些方法可以做到这一点：
#wrapper{
overflow:hidden;
}
Or
或者
#wrapper:after
{
content:".";
display:block;
clear:both;
visibility:hidden;
}
回答by kleinohad
make sure the content inside your div ended with clear:both style
确保 div 中的内容以 clear:both 样式结束
回答by Ifti Mahmud
Here is the Latest solution of the problem:
这是问题的最新解决方案：
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 "".
它应该始终有效。你可以调用类的名称。集团而不是.clearfix，因为它使代码更语义。注意，双引号""之间的Content值不需要加点号甚至空格。
Source: http://css-snippets.com/page/2/
回答by Steve Wilkes
回答by jim31415
As stated earlier by Jamie Dixon, a floated <div>is taken out of normal flow. All content that is still within normal flow will ignore it completely and not make space for it.
正如 Jamie Dixon 早先所说，浮动<div>是从正常流中取出的。所有仍在正常流程中的内容将完全忽略它，而不是为它腾出空间。
Try putting a different colored border border:solid 1px orange;around each of your <div>elements to see what they're doing. You might start by removing the floats and putting some dummy text inside the div. Then style them one at a time to get the desired layout.
尝试border:solid 1px orange;在每个<div>元素周围放置不同颜色的边框，看看它们在做什么。您可以先移除浮动并在 div 中放置一些虚拟文本。然后一次设置一个样式以获得所需的布局。
