css - 如何使用动态数据将 100% 高度计算为 0 px

Question

我有一个页面，我已开始使用 Twitter Bootstrap css 文件构建该页面。我希望我的 .container-fluid.sidebar 和 .container_fluid.content 是窗口的 100%，并且有自动独立的滚动条。当我设置侧边栏和内容如下时

.container-fluid>.sidebar{position:absolute;top:42px;left:20px;width:240px; overflow-y:auto;overflow-x:visible;min-height: 94%;}
.container-fluid>.content{top:42px;margin-left:240px;overflow-y:auto;overflow-x:visible;min-height: 94%;height:94%;}

高度计算为 0 像素。我有填充这些元素的动态数据，所以它们刚开始时是

<div class="container-fluid" id="main">
    <div id="navigation" class="sidebar">
        <ul class="treeview"/>
    </div>

    <div id = "mainwindow" class="content">
        <div id="update_panel"/>
    </div>
</div>

我已通过手动将高度设置为 600 像素确认所有动态数据都正确填充。

Answer 1

我知道如何做到这一点的唯一方法是通过 JavaScript 和“dhtml”。以下内容应该可以为您解决问题，并且如果用户调整窗口大小时也会调整大小。可能会出现问题的一件事是，当添加水平滚动条时会发生什么，这会改变可用的垂直客户区域的数量。

getClientHeight 例程应该是跨浏览器安全的，所有现代浏览器都支持 getElementById。

函数 getClientHeight() {

var windowHeight = window.innerHeight ? window.innerHeight :

                          (document.documentElement && document.documentElement.clientHeight ?

                          document.documentElement.clientHeight : document.body.clientHeight);

return windowHeight;

}//函数getClientHeight

//此例程将设置“mainindow”和“naviagtion”DIVS 的“高度”

  function sizeDivs() {

    var cH = getClientHeight();

        var eMW = document.getElementById('mainwindow');

    eMW.style.height = cH + 'px';

    var enav = document.getElementById('navigation');

    enav.style.height = cH + 'px';

  } // function sizeDivs

函数加载事件(e){

sizeDivs();

}//函数加载事件

//这是窗口“调整大小”处理程序 - 当窗口大小改变时我们想要调整 DIVS 的大小

变种调整时间;

函数 handleResize() {

  clearTimeout(resizeTimer); 

  resizeTimer = setTimeout(sizeDivs, 200); 

}//处理调整大小

//现在是设置页面加载和调整大小处理程序的时候了

window.onload = loadEvent;

window.onresize = handleResize;