css - 如何让 div 占据父 div 的整个高度？

Question

我正在使用基于 Bootstrap 的布局，并且在该 div 下有一个名为“content”的 div 我已经放置了基本上是一个大表的所有组件，div 如下所示。问题是除非我明确指定一些高度为 div 称为 scheduler_here(如下所示)它看起来非常小。我在下面包含了下面的 div 内容 css 设置。我已尝试将高度指定为 100%，但这不起作用。我不是 CSS 专家，只是在学习。我应该如何修改父“内容”div，以便调度程序将占据窗口的剩余高度，或者用滚动条显示它，有什么想法吗？

<div id="content" class=" span10">
    <div id="scheduler_here" class="dhx_cal_container span10" style="height:2000px;width:95%">
     <div class="dhx_cal_navline" class="span10">
     <div class="dhx_cal_prev_button">&nbsp;</div>
     <div class="dhx_cal_next_button">&nbsp;</div>
    </div>
</div>



#content {
       box-shadow: -3px -1px 2px rgba(0, 0, 0, 0.95);
       background: url("/static/img/bg.jpg") repeat scroll 0% 0% transparent;
       filter: none;
       padding: 25px 0px 25px 40px;
       margin: -25px -4px;
       position: relative;
       z-index: 1;
       min-height: 100%;
 }

Answer 1

为了在使用 % 值时将高度(或最小高度)计算为非零值，父容器需要具有明确的高度值或计算值。

在您的情况下，您可能需要将 html 的高度和 body 标记设置为 100%，所以我建议您尝试:

html, body {
    height: 100%;
}

这样，您的#container 将继承视口(viewport)高度并具有明确定义的计算高度值。

脚注

您需要确保在 body 和 #container div 之间的所有 block 级祖先元素上都设置了高度。您可以继承高度，将其设置为明确值(例如 400px)或相对值(例如:100%)。