CSS分区不进行自动高度设置

Question

我有这个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 -->

我需要bodydiv和property searchdiv位于容器div内，但当容器div内的子div较大时，带边框的容器div不会扩展其高度

这里还有一把小提琴：http://jsfiddle.net/bfSLD/1/

Answer 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生物板：

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

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

Answer 2

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

display: inline-block;

Answer 3

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

这就是你想要的achive吗？

Answer 4

尝试从#body中删除左侧的浮点，并将显示设置为内联块(也在#body上(。

Answer 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;
}