Question

我有2个div：第一个有100px高度，第二个我想填充剩余的屏幕而没有垂直滚动条。我试图将第二个div高度设置为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;
}

DEMO here.

选项2：设置redBack 100％ - 100px。

的高度

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;
}

DEMO here.

Answer 2

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

这是一个有效的fiddle

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 个答案: