如何在没有滚动条的情况下使第二个div填充屏幕的剩余高度？

Question

我有2个div：第一个div具有100px的高度，第二个我想填充屏幕的其余部分而没有垂直滚动条。 我试图将第二个divs高度设置为100％，但是出现了滚动条。

<html>
<body>
    <div class="wihe100">
        <div class="firstDiv">
            AAA
        </div>
        <div class="wihe100 redBack">
            BBB
        </div>
    </div>
</body>
</html>

html, body 
{ 
    height:100%; 
    margin: 0px;
}

.wihe100
{
    width: 100%;
    height: 100%;
}

.redBack
{
    background-color: #FF0000;
}

.firstDiv
{
    height: 100px;
    background-color: #0000FF;
}

这是一个JSFiddle： http : //jsfiddle.net/wHtX7/1/

Answer 1

选项1：为主体本身提供红色背景。

html, body{
    height:100%; 
    margin: 0px;
    background-color: #FF0000;
}
.firstDiv{

    height: 100px;
    background-color: #0000FF;
}

演示在这里。

选项2：将redBack高度设置为100％ redBack 。

HTML：

<div class="wihe100">
    <div class="firstDiv">AAA</div>
    <div class="redBack">BBB</div>
</div>

CSS：

html, body {    
    margin: 0px;
}
html, body,.wihe100 {
    height:100%;
}
.redBack {
    background-color: #FF0000;
    height:calc(100% - 100px);
}
.firstDiv {
    height: 100px;
    background-color: #0000FF;
}

演示在这里。

Answer 2

您可以设置overflow: hidden; 在包含两个DIV的父DIV <div class="wihe100">中。

这是一个工作的小提琴

Answer 3

使用flexbox

<html>
    <body>
        <div class="wihe100">
            <div class="firstDiv">
                AAA
            </div>
            <div class="wihe100 redBack">
                BBB
            </div>
        </div>
    </body>
</html>

-

* {
    -moz-box-sizing: border-box;
    -webkit-box-sizing: border-box;
    box-sizing: border-box;
}

body {
    margin: 0;
    padding: 0;
}

.wihe100 {
    display: flex;
    height: 100vh;
    flex-direction: column;
}

.firstDiv {
    background-color: red;
    height: 100px;
}

.redBack {
    background-color: blue;
    flex: 1;
}

http://jsfiddle.net/wHtX7/16/

Answer 4

我认为通过添加

overflow-y:hidden;

对您的.wihe100类将有所帮助。

如何在没有滚动条的情况下使第二个div填充屏幕的剩余高度？

问题描述

4 个解决方案

解决方案1
4 已采纳 2014-01-21 12:03:19

解决方案2
1 2014-01-21 11:57:25

解决方案3
1 2014-01-21 12:07:49

解决方案4
0 2014-01-21 12:01:08

如何在没有滚动条的情况下使第二个div填充屏幕的剩余高度？

问题描述

4 个解决方案

解决方案1 4 已采纳 2014-01-21 12:03:19

解决方案2 1 2014-01-21 11:57:25

解决方案3 1 2014-01-21 12:07:49

解决方案4 0 2014-01-21 12:01:08

解决方案1
4 已采纳 2014-01-21 12:03:19

解决方案2
1 2014-01-21 11:57:25

解决方案3
1 2014-01-21 12:07:49

解决方案4
0 2014-01-21 12:01:08