用div填充额外的空间

Question

我想要这样的情况：

但是当黄色div有height: 100%;时，会有一个滚动条。

我该如何解决这个问题？

JSFiddle：http://jsfiddle.net/830roLv7/

Answer 1

如果您只是需要填充颜色，则不需要额外的div：

＆＃13;

＆＃13;

html, body{
    height: 95vh;
    margin: 0;
    background-color: yellow;    
}

.header{
    height: 200px;
    width: 100%;
    display: block;
    background-color: green;
}

＆＃13;

<div class='header'>Header</div>

＆＃13;

＆＃13;

＆＃13;

Answer 2

当您将元素的高度设置为100％时，该百分比将引用父元素，在本例中为body，而不是剩余空间。 body引用viewport，即您的监视器（或多或少......）。

因此，如果您将绿色div的高度设置为200px，然后将黄色设置为100％，则总计将是显示器的整个高度加上200px =＆gt;溢出！

Answer 3

尝试

height: calc(100% - 200px);

Answer 4

如果内容很多，则div不会涵盖所有内容：

html, body{
    height: 100%;
}

.header{
    height: 200px;
    width: 100%;
    display: block;
    background-color: green;
}

.container-base{
    padding-top: 20px;
    width: 100%;
    height: 100% !important;
    display: block;
    background-color: yellow;
}

<div class='header'>Header</div>
<div class='container-base'>Content with scrollbar :(
Lots of content<br />Lots of content<br />Lots of content<br />Lots of content<br />Lots of content<br />Lots of content<br />Lots of content<br />Lots of content<br />Lots of content<br />Lots of content<br />Lots of content<br />Lots of content<br />Lots of content<br />Lots of content<br />Lots of content<br />Lots of content<br />Lots of content<br />Lots of content<br />Lots of content<br />Lots of content<br />Lots of content<br />Lots of content<br />Lots of content<br />Lots of content<br />Lots of content<br />Lots of content<br />Lots of content<br />Lots of content<br />Lots of content<br />Lots of content<br />Lots of content<br />Lots of content<br />Lots of content<br />Lots of content<br />Lots of content<br />Lots of content<br />Lots of content<br />Lots of content<br />Lots of content<br />Lots of content<br />Lots of content<br />Lots of content<br />Lots of content<br />Lots of content<br />Lots of content<br />Lots of content<br />Lots of content<br />Lots of content<br />Lots of content<br />Lots of content<br />Lots of content<br />Lots of content<br />Lots of content<br />Lots of content<br />Lots of content<br />Lots of content<br />Lots of content<br />Lots of content<br />Lots of content<br />Lots of content<br />Lots of content<br />Lots of content<br />Lots of content<br />Lots of content<br />Lots of content<br />Lots of content<br />Lots of content<br />Lots of content<br />Lots of content<br />Lots of content<br />Lots of content<br />Lots of content<br />Lots of content<br />Lots of content<br />Lots of content<br />Lots of content<br />Lots of content<br />Lots of content<br />Lots of content<br />Lots of content<br />Lots of content<br />Lots of content<br />Lots of content<br />Lots of content<br />Lots of content<br />Lots of content<br />Lots of content<br />Lots of content<br />Lots of content<br />Lots of content<br />Lots of content<br />Lots of content<br />Lots of content<br />Lots of content<br />Lots of content<br />Lots of content<br />Lots of content<br />Lots of content<br />Lots of content<br /></div>

它被称为溢出。因此黄色div也可以覆盖溢出。 我该怎么做？