Question

我正在使用基于引导程序的布局，并且在div下面有一个名为“content”的div我放置了所有基本上都是大表的组件，div如下所示。问题是除非我明确指定某个高度为div，称为scheduler_here（如下所示），它看起来非常小。我在下面列出了div内容css设置如下。我已经尝试将高度指定为100％，但这不起作用。我不是css专家，只是学习。任何想法我应该如何修改父“content”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将继承视口高度并具有明确定义的计算高度值。

<强>脚注

您需要确保在主体和#container div之间的所有块级祖先元素上设置高度。您可以继承高度，将其设置为显式值（例如400px）或相对值（例如：100％）。

Answer 2

FWIW我通过注册onResize事件处理程序解决了这个问题。感谢：http://css-tricks.com/forums/discussion/20271/setting-a-div-height-to-the-window-viewport-size/p1

    $(document).ready(function(){
            resizeDiv();
    });

    window.onresize = function(event) {
            resizeDiv();
    }

    function resizeDiv() {
            vpw = $(window).width(); 
            vph = $(window).height(); 
            $('#scheduler_here').css({'height': vph + 'px'});
    }

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

2 个答案: