logo标签列表

如何设置div的最小高度以适应屏幕？

htmlcss
6
<!DOCTYPE html>
<html>
<head>
<style>
.banner{
    width:800px;
    height:160px;
    border:1px solid #000000;
}
.main_box{
    width:800px;
    height:300px;
    border:1px solid #000000;
}
</style>
</head>
<body>
<div class="banner"></div>
<div class="main_box"></div>
</body>
</html>

当我将main_box的最小高度设置为100%时，什么也没有发生。

但是当我将其高度设置为像素时，高度就可见了。我想将main_box div的高度设置为适合屏幕。

有人知道如何做吗？

当我将“main_box”的最小高度设置为100％时，什么也没有发生 - 当然不会，因为以百分比给出的任何高度都必须在父元素中设置高度，否则首先不清楚要采用百分比的值。 - CBroe
3个回答
8
使用(视窗单位)vhCSS3中的尺寸调整vw和vh单位。
min-height: 100vh

完整代码

.banner{
    width:800px;
    height:160px;
    border:1px solid #000000;
}
.main_box{
    width:800px;
    min-height: 100vh;
    height:300px;
    border:1px solid #000000;
    background:red
}
<div class="banner"></div>
<div class="main_box"></div>

0

首先将html和body的高度设置为100％

html,body{
    height:100%
}
0

尝试使用这个CSS：

<style>
html,body{
    height:100%
}
.banner{
    width:800px;
    height:160px;
    border:1px solid #000000;
}
.main_box{
    width:800px;
    min-height:300px;
    height:75%;
    border:1px solid #000000;
}
</style>
网页内容由stack overflow 提供, 点击上面的
可以查看英文原文，
原文链接