Question

如何使容器中的“div-3”根据其高度进行调整。

无论div-3的内容不完整，我都需要div的1和2留下的高“div-3”。

可能不显示div 1或div 2（显示：无）。

Html代码：

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=iso-8859-1" />
<title></title>
<style>
.container{
    height:300px;
    overflow:hidden;
    width:500px;
}
.container div{
}
.div-1{
    background-color:#009966;
}
.div-2{
    background-color:#999999;
}
.div-3{
    background-color:#3399FF;
}

</style>
</head>
<body>
<div class="container">
    <div class="div-1">g f erg erg erg rga f erg erg erg rga</div>
    <div class="div-2">
        sdf<br />sdf<br />sdf<br />sdf<br />sdf<br />sdf<br />sf erg erg erg rgadf<br />sdf<br />sdf<br />sdf<br />sdf<br />sdf<br />sdf<br />sdf<br />sdf<br />sdf<br />sdf<br />sdf<br />sdf<br />sdf<br />sdf<br />sdf<br />sdf<br />sdf<br />sdf<br />sdf<br />sdf<br />sdf<br />sdf<br />sdf<br />
    </div>
    <div class="div-3">b gf erg erg erg rga</div>
</div>
</body>
</html>

Answer 1

我不太确定你在问什么。但是，如果在你的CSS中，不使用高度，使用min-height，如果你的div内容小于指定的高度，它仍然会强制300px，如果它更大，它会自动调整。

e.g。

.container{
    min-height:300px;
    overflow:hidden;
    width:500px;
}

如果您要确保显示所有div，则可以尝试在div样式中设置max-height属性。

e.g。

.div-3{
    background-color:#3399FF;
    max-height: 200px;
}

根据容器调整“div”的高度

1 个答案: