Question

对于我正在处理的特定网络应用，有时可能会有很长的桌子。我试图做的是实现一个视图模式，它将强制表只占用屏幕上剩下的空间并拥有自己的滚动条。

为了解决这个问题，我创建了一个html的小测试位，用2个固定高度的元素模仿我的布局，然后根据有多少个子元素来增加第3个元素。

我想用这段代码完成的工作是整个布局只占用浏览器窗口的大小，如果需要，在扩展元素中显示一个滚动条。

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

我分享了一个jsfiddle：http://jsfiddle.net/kPG3J/

<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>

Answer 1

不需要javascript。但是，您可能需要缩小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元素

如何在没有滚动的情况下将布局固定到浏

2 个答案: