Question

<!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" to 100%的最小高度时，没有任何反应。

但是当我设置它的高度（以像素为单位）时，高度是可见的。我想设置main_box div的高度以适应屏幕。

有谁知道怎么做？

Answer 1

使用（viewport-units）vh Sizing with CSS3的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>

Answer 2

首先设置html，身高为100％

html,body{
    height:100%
}

Answer 3

尝试使用此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>

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

3 个答案: