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 -->

我需要body div和property-search 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 biolerplate的这个：

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

CSS Divs不做自动高度

5 个答案: