如何将浮动的子div扩展到父div的高度
如何将浮动的子div扩展到父div的高度
提问于 2014-08-10 05:07:48
我在一个div中有两个div。其中一个漂浮在左边，里面有一些链接。它的宽度为200px，两个元素中的第二个元素的值为overflow:hidden，右边的宽度为rest。它包含一些内容，这使得它的高度比第一个div更长。
我希望第一个div根据第二个div高度的增量扩展到父div或第二个div的高度
<div id ="main">
<div id ="first">
<a href="#">Link</a>
<a href="#">Link</a>
<a href="#">Link</a>
<a href="#">Link</a>
</div>
<div id ="second">
<a href="#">Link</a>
<a href="#">Link</a>
<a href="#">Link</a>
<a href="#">Link</a>
<a href="#">Link</a>
<a href="#">Link</a>
<a href="#">Link</a>
<a href="#">Link</a>
</div>
</div>。
#main{
overflow:hidden;
border:1px solid black;
}
#first{
border:1px solid black;
width:200px;
float:left;
}
a{
display:block;
padding:10px;
}
#second{
border:1px solid black;
overflow:hidden;
}JSFiddle
回答 3
Stack Overflow用户
发布于 2014-08-10 05:25:31
您的问题的解决方案是:首先，您必须为父div提供一个height，然后设置子div的高度，将#first设置为min-height: 100%，代码如下：
#main {
overflow:hidden;
border:1px solid black;
height: 400px;
}
#first {
border:1px solid black;
width:200px;
float:left;
min-height: 100%;
}Stack Overflow用户
发布于 2014-08-10 05:35:36
您可以使用应用于#main容器的display: table;，以及应用于#first和#second的display:table-row;和display:table-cell;，以使第一个子容器采用其兄弟容器#second的高度。请记住添加overflow:auto;以允许第一个容器将其高度扩展到底部。
CSS
#main{
overflow:hidden;
border:1px solid black;
display:table;
width:100%;
}
#first{
border:1px solid black;
width:200px;
float:left;
display:table-row;
overflow:auto;
height:100%;
}
a{
display:block;
padding:10px;
}
#second{
border:1px solid black;
overflow:hidden;
height:400px;
display:table-cell;
width:100%;
}演示http://jsfiddle.net/a_incarnati/djobkh7t/7/
Stack Overflow用户
发布于 2015-03-23 21:37:37
我已经删除了浮点数，并更改了div上的显示类型来解决这个问题。参见示例CSS + fiddle：
#main{
border: 1px solid black;
display: table;
width: 500px;
}
#first{
border: 1px solid black;
width: 25%;
display: table-cell;
}
#second{
border: 1px solid black;
width: 75%;
display: table-cell;
}http://jsfiddle.net/djobkh7t/13/
可以在父div上设置“table”的显示类型，然后在子div上设置“table-cell”的显示类型。
页面原文内容由Stack Overflow提供。腾讯云小微IT领域专用引擎提供翻译支持
原文链接：
https://stackoverflow.com/questions/25223071
复制相关文章
相似问题
腾讯云开发者
