代码之家 › 专栏 › 技术社区 › andres descalzo

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

css

andres descalzo · 技术社区 · 15 年前

我如何才能使容器中的“div-3”调整为该容器所具有的高度。

我需要适合的高“div-3”由div的1和2留下,无论这个div-3的内容不完整。

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>

1 回复 | 直到 15 年前

kafuchau 15 年前

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

例如

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

能够试着设置一个 max-height div样式中的属性。

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

推荐文章

YunusoviÄ · 我无法用css更改html段落颜色

1 年前

Blake · 无法使用CSS旋转Angular 15中的字体图标

1 年前

Maarten -Monica for president · 将图像放在锚点标记内时调整网格中的图像大小

1 年前

Phil Lucks · 如何制作边界的外半径?

1 年前

roy_meir · 创建自定义下拉式元素

1 年前

Community wiki · 如何为触摸设备优化网站

1 年前

Paras Chandravanshi · 为什么<ul>没有从其父<p>元素继承?

1 年前

tpetzoldt · 如何在有光泽的情况下抑制图像的抗锯齿?

1 年前

boyenec · 反应如何将css样式应用于我从api respose获得的页面的spcifc部分

1 年前

manofconstsorrow · 点击导航项目关闭汉堡菜单

1 年前