CSS Divs 不做自动高度答案

【问题标题】：CSS Divs not doing auto heightCSS Divs 不做自动高度
【发布时间】：2013-04-17 20:48:55
【问题描述】：

我有这个 CSS/HTML 代码：

#container {
    width:70%;
    height:100%;
    margin:120px auto 0 auto;
    padding:10px 10px 10px 10px;
    border:solid 1px #a79494;
    border-top:solid 4px #a2cd3a;
    padding-bottom:60px;   /* Height of the footer */
}
#body {
    width:70%;
    border:solid 1px #a79494;
    display:inline;
    float:left;
}
#property-search {
    width:20%;
    border:solid 1px #a79494;
    display:inline;
    float:right;
}

<div id="container">
<div id="body">
   Lorem ipsum dolor sit amet, consectetur adipiscing elit. Maecenas et enim sed tellus luctus varius. Ut nisl felis, volutpat id ornare at, placerat ut nisi. Cras auctor, nisi vitae interdum iaculis, magna nulla pretium quam, ac euismod quam ante at sapien. Cras mattis velit sed ante pretium non pulvinar metus molestie. Maecenas euismod bibendum nulla quis interdum. Proin venenatis pellentesque lorem quis condimentum. Vestibulum sapien sapien, convallis ut semper at, hendrerit in lorem. Curabitur cursus tempor felis eu varius.
<br /><br />
In id sem neque. Nam id convallis nisl. Duis sed venenatis erat. Sed blandit auctor imperdiet. Aliquam magna erat, pellentesque at fermentum eget, cursus at nunc. Pellentesque vestibulum feugiat aliquam. Proin cursus sapien non mauris laoreet posuere. Maecenas eleifend hendrerit suscipit. Suspendisse eleifend lacus vel arcu ultrices vulputate. Mauris mattis feugiat massa vel tincidunt. Proin ut mi non ipsum tristique pretium sit amet fermentum massa. In hac habitasse platea dictumst. Morbi dictum iaculis nibh, at vestibulum mauris placerat sit amet. Vivamus hendrerit molestie elit, nec porta libero semper a. Nullam in tellus erat, vitae sagittis nisi. Cras interdum hendrerit magna, at accumsan urna fermentum vitae.
<br /><br />
Sed eu libero non magna egestas lacinia. Suspendisse lacinia ipsum consequat metus aliquet laoreet. Quisque in eleifend diam. Aliquam orci lacus, ultrices non adipiscing nec, sollicitudin in erat. Etiam dignissim, felis non vulputate bibendum, lectus nunc congue massa, in porta tellus sapien id augue. Etiam odio ligula, iaculis vitae faucibus nec, sodales sed nunc. Phasellus eget neque massa, viverra facilisis arcu. Ut suscipit bibendum libero, eu consectetur leo rhoncus sit amet. Sed interdum risus a dolor venenatis ullamcorper ut ut quam. Curabitur eros leo, pulvinar ac vestibulum adipiscing, tempor nec augue. Cras tincidunt blandit libero, eget sollicitudin erat tempor eu. Donec eleifend posuere lectus. Donec turpis ante, sodales in luctus eget, feugiat non sapien. Donec sagittis nunc et ipsum gravida a scelerisque odio ultricies.
</div>
<div id="property-search">
SEARCH
</div> <!-- property-search -->
</div> <!-- body -->

我需要 body div 和 property-search div 位于它们所在的容器 div 内，但是当其中的子 div 更大时，带有边框的容器 div 不会扩大其高度

这也是一个小提琴：http://jsfiddle.net/bfSLD/1/

【问题讨论】：

试试jsfiddle.net/bfSLD/1
在浮动内部元素之后插入<br style="clear: both;">：jsfiddle.net/bfSLD/4
右边的搜索位怎么样 - 如果可能的话，我需要它在顶部与 body div 一致
没有看到搜索框，将
向下移动。 jsfiddle.net/bfSLD/6
我能不能推荐<br style="clear: both;"> 有更好的替代品。此答案使用无效的内联样式，并且是一个非常古老的修复程序。我建议要么使用我已经测试过的答案中的快速修复，要么使用@dfsq 的答案，这是一种非常流行的技术

标签： html css

【解决方案1】：

你必须清除浮动：

<div id="container">
    <div id="container">...</div>
    <div id="body">...</div>
    <div style="clear: both;"></div>
</div>

http://jsfiddle.net/bfSLD/8/

或者更好的解决方案是使用 clearfix 类：

<div id="container" class="clearfix">
    <div id="container">...</div>
    <div id="body">...</div>
</div>

例如来自 HTML5 biolerplate 的这个：

.clearfix:before, .clearfix:after {content: " "; display: table;}
.clearfix:after {clear: both;}
.clearfix {*zoom: 1;}

http://jsfiddle.net/bfSLD/12/

【讨论】：

【解决方案2】：

将以下内容添加到容器中：

display: inline-block;

【讨论】：

看起来好一点，但我需要容器居中而不是左对齐
终止居中边距

【解决方案3】：

http://jsfiddle.net/bfSLD/9/

这是你想要achive的吗？

【讨论】：

【解决方案4】：

尝试从#body 中移除左浮动，并将显示设置为inline-block（也在#body 上）。

【讨论】：

【解决方案5】：

这是你要找的吗？

#container {
width:70%;
margin:120px auto 0 auto;
padding:10px 10px 10px 10px;
border:solid 1px #a79494;
border-top:solid 4px #a2cd3a;
padding-bottom:60px;   /* Height of the footer */
position:absolute;
}
#body {
width:70%;
border:solid 1px #a79494;
display:inline;
float:left;
}
#property-search {
width:20%;
border:solid 1px #a79494;
display:inline;
float:right;
}

【讨论】：