Question

我在div中有两个div。其中一个浮在左边，里面有一些链接。它的宽度为200px。两者中的第二个具有溢出值：隐藏，并且其宽度为右侧。它有一些内容，使其高度比第一个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

您的问题的解决方案是：首先您必须向父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%;
}

Answer 2

您可以使用display: table;应用于#main容器，display:table-row;和display:table-cell;应用于#first和#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%;
}

DEMO http://jsfiddle.net/a_incarnati/djobkh7t/7/

Answer 3

我删除了浮动并更改了div上的显示类型以解决问题。参见示例CSS +小提琴：

#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'。

如何将浮动的子div扩展到其父级的高度

3 个答案: