如何用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%;
}

Answer 1

您必须提供所有父元素，包括您要扩展的div，高度为100％。

Answer 2

实际上，如果没有足够的内容，它不会覆盖整个页面，但最好的方法是给它'位置：绝对/固定/相对'并给出相同的div顶部：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%;
    }

Answer 3

html

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

css

.full_height {
    height: 100vh
}