如何在沒有滾動條的情況下使第二個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