如何使用动态数据固定100％的高度为0 PX

StackOverflow https://stackoverflow.com/questions/8808311

  •  26-10-2019
  •  | 
  •  

题

我的页面已经开始使用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%;}

高度计算为0px。我有充满这些项目的动态数据，因此它们只是开始

<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 PX来正确填充。

有帮助吗？

解决方案 2

我设法通过删除我将大部分页面封装在没有充分理由的大部分页面上的额外标签来弄清楚这一点。它现在仅与CSS一起工作。

其他提示

我知道该怎么做的唯一方法是通过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

功能loadevent（e）{

sizeDivs();

} //功能loadevent

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

var resizetimer;

函数handleresize（）{ 

  clearTimeout(resizeTimer); 

  resizeTimer = setTimeout(sizeDivs, 200);

} //处理程序

//现在是设置页面加载并调整操纵器大小的时候了

window.onload = loadeVent;

window.sonresize = handleresize;

许可以下： CC-BY-SA 和 归因
不隶属于 StackOverflow
scroll top