对于我正在开发的特定网络应用程序，有时可能会有一张很长的 table 。我试图做的是实现一种 View 模式，这将强制表格只占用屏幕上剩余的空间并拥有自己的滚动条。
为了精简内容，我创建了一个 html 的小测试位，它模仿我的布局，其中包含 2 个固定高度的元素，然后是第三个元素，它可能会根据其中的子元素数量而增长。
我试图用这段代码完成的是让整个布局只占据浏览器窗口的大小，如果需要，在扩展元素中显示滚动条。
如果有人可以在这里帮助处理 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>
最佳答案
不需要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 元素
关于html - 如何在不滚动的情况下将布局固定到浏览器窗口，我们在Stack Overflow上找到一个类似的问题： https://stackoverflow.com/questions/7982665/