如何使用CSS将div高度扩展到底部？

Question

我在html页面中有一个div容器，我想设置它的高度以展开屏幕上所有剩余的页面。

我该怎么做？

这是我的代码：

HTML

<div class="row">
       <div id="builder-container" class="col-xs-12 col-lg-9">                                    
             <div id="builder-content"  > </div>
       </div>
</div>
CSS

#builder-container {
    background-color: #ccc;
    height: 100%;
}

我在html页面中有一个div容器，我想设置它的高度以展开屏幕上所有剩余的页面。我该怎么做？那是我的代码：HTML

]

您必须将所有父元素（包括要扩展的div）的高度设置为100％。

实际上，如果没有足够的内容，它不会覆盖整个页面，但是最好的方法是给它'position：absolute / fixed / relative'并赋予相同的div top：whateveryouwant px;底部：0px / 0％；宽度和高度：100％

JSFiddle-编辑：立即检查

CSS

    body
{
   margin:0;
   width:100%;
   height:100%;
}

    #builder-container {
        display:block;
        position:absolute;
        margin-top:5%;
        left:0%;
        bottom:0%;
        background-color: #ccc;
        height: 100%;
        width:100%;
    }

html

<div class="row full_height">
    <h1>Test elem</h1>
</div>

css

.full_height {
    height: 100vh
}

Answer 1

您必须将所有父元素（包括要扩展的div）的高度设置为100％。

Answer 2

实际上，如果没有足够的内容，它不会覆盖整个页面，但是最好的方法是给它'position：absolute / fixed / relative'并赋予相同的div top：whateveryouwant px;底部：0px / 0％；宽度和高度：100％

Answer 3

html