2

我正在使用基于引导程序的布局，并且在该 div 下有一个名为“content”的 div 我已经放置了基本上是一个大表的所有组件，这些 div 如下所示。问题是，除非我明确指定某个高度为名为 scheduler_here 的 div（如下所示），否则它看起来非常小。我在下面包含了 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%;
 }
4

2 回答 2

2

为了在使用 % 值时将高度（或最小高度）计算为非零值，父容器需要具有显式高度值或计算值。

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

html, body {
    height: 100%;
}

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

脚注

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

于 2013-06-22T22:05:28.610 回答
0

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'});
    }
于 2013-06-23T05:47:13.720 回答