如何修正浏览器窗口的布局而不滚动

对于我正在处理的特定Web应用程序，有时可能会出现长长的表格。我试图做的是实现一个视图模式，这将强制表格只占用屏幕上留下的空间并拥有自己的滚动条。如何修正浏览器窗口的布局而不滚动

为了去掉东西，我创建了一个测试位，它用2个固定高度的元素模仿我的布局，然后是第三个元素，它可能随着子元素的数量而增长。

我试图用这段代码来完成的事情是让整个布局只占用浏览器窗口的大小，并且如果需要在展开的元素中显示一个滚动条。

如果有人可以帮助在这里的CSS，它将不胜感激。 #grid是我想要在自己的滚动div中显示的元素，并且不会超出窗口高度，导致窗口滚动条显示。

<style> 
#toolbar {border:1px solid red; height:150px;width:100%} 
#chart {border:1px solid green; height:350px;width:100%} 
#grid{border:1px solid blue; height:auto;width:100%} 
#wrapper {min-height:100%;height:100%;} 
#grid {overflow:scroll} 
html {height:100%} 
body {height:100%; margin:2em } 
</style> 
</head> 

<body> 
<div id="wrapper"> 
    <div id="toolbar">Tool bar</div> 
    <div id="chart">The Chart</div> 
    <div id="grid"> 
     <p>Grid data </p> 
     <p>Grid data </p> 
     <p>Grid data </p> 
     <p>Grid data </p> 
     <p>Grid data </p> 
     <p>Grid data </p> 
     <p>Grid data </p> 
     <p>Grid data </p>     
     <p>Grid data </p> 
     <p>Grid data </p> 
     <p>Grid data </p> 
     <p>Grid data </p> 
     <p>Grid data </p> 
     <p>Grid data </p> 
     <p>Grid data </p> 
     <p>Grid data </p>     
    </div> 
</div> 


</body>

来源

2011-11-02 Dave

戴夫，您可以请一个jsfiddle吗？ – Yisela

肯定的事情 - 我爱jsfiddle ..从来没有想过使用它自己，虽然！ HTTP：//的jsfiddle。净/ kPG3J/ – Dave

No javascript needed。但是，您可能需要缩小div的高度才能使其具有实用性。下面是修改CSS的作品（不是所有的浏览器完全测试）：

#toolbar {border:1px solid red; height:150px; width:100%;} 
#chart {border:1px solid green; height:250px; width:100%;} 
#grid{border:1px solid blue; width:100%;} 
#wrapper {position: absolute; top: 2em; left: 2em; bottom: 2em; right: 2em;} 
#grid {overflow: auto; position: absolute; top: 404px; bottom: 0;} 
html {height: 100%} 
body {margin: 0; height: 100%; }

的top位置为上两个div和边境大量的高度。 “边距”是由wrapper div的位置处理的，而不是body元素的位置

来源

2011-11-02 16:04:05 ScottS

非常好。它甚至可以完美处理浏览器的大小调整，即使JavaScript解决方案不会执行（除非他处理浏览器大小调整事件）。 – xbonez

谢谢。很高兴我不是唯一一个为之工作的人。 – ScottS

感谢Scott的输入 – Dave

改成这样：根据你想要什么

#grid {height:200px;overflow:scroll}

设定高度。

如果你想将高度设置为浏览器的高度，你需要使用JavaScript的screen.height

http://jsfiddle.net/yNCkA/

您可以使用此JavaScript来获得高度的元素应该是：

<script> 
    function setHeight() 
    { 
     var height = screen.height - 300; // 300 = 150 (chart) + 150 (graph) 
     document.getElementById('grid').style.height = height + "px";   
    } 
</script>

你的HTML：

<body onload="setHeight()"> 
    <!-- html goes here --> 
</body>

如果JavaScript是不是一种选择，你可以做以下之一：

开发假设1024×768的最小分辨率的页面。根据survey，99％的人使用1024x768或更高的分辨率。
将您的身高设置为100％。设置和chart高度为每个15％，并将grid高度设置为70％。但是，这意味着和chart并不总是150px。

来源

2011-11-02 15:41:40 xbonez

我怀疑JavaScript可能是唯一的出路。谢谢 – Dave

优秀回答@xbonez – Yisela

@Dave：如果Javascript不是选项，请参阅编辑。 – xbonez

如何修正浏览器窗口的布局而不滚动

回答

相关问题