【问题标题】：How to expand div height to bottom with css?如何使用css将div高度扩展到底部？
【发布时间】：2015-07-20 18:22:21
【问题描述】：

我的 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 height expand

【解决方案1】：

html

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

css

.full_height {
    height: 100vh
}

【讨论】：

【解决方案2】：

实际上，如果没有足够的内容，它不会覆盖整个页面，但最好的方法是给它'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%;
    }

【讨论】：

问题我如何计算上面的内容来给top一个合适的值？有什么自动技巧吗？
听不懂你想说的
我的意思是这个 div 不是从顶部开始的。上面有一个内容，所以我想在这个内容之后开始
好吧，你是说这一行上方有一些 div 吗？我建议你把上面 div 的代码展示出来，这样这里的人就很容易解决问题，因为通过这半个代码没有人能够解决问题
我已经编辑了上面的JSFiddle链接，现在检查一下。

【解决方案3】：

你必须给所有的父元素，包括你想要扩展的 div，高度为 100%。

【讨论】：