html - 如何将 float 的子div扩展到其父级的高度

Question

我在一个 div 中有两个 div。两者之一 float 到左侧，其中有一些链接。它的宽度为 200px 两者中的第二个具有 overflow:hidden 的值，并且它的右侧宽度为 rest。它包含一些内容，使其高度比第一个 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

Answer 1

你的问题的解决方案是:首先你必须给父 div 一个 height 然后设置 child 的高度，#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%;
}