一千萬個為什麽

搜索

如何在沒有滾動的情況下將布局固定到瀏

對於我正在處理的特定Web應用程序,有時可能會有很長的表。我試圖做的是實現一個視圖模式,它將強制表只占用屏幕上剩下的空間並擁有自己的滾動條。

為了解決問題,我創建了一個html的小測試位,用2個固定高度的元素模仿我的布局,然後是第3個元素,它可能會根據有多少個子元素而增長。

我想用這段代碼完成的是整個布局只占用瀏覽器窗口的大小,如果需要,在擴展元素中顯示一個滾動條。

如果有人可以在這裏幫助css,將不勝感激。 #grid是我想在其自己的滾動div中顯示的元素,並且不會超出窗口高度,導致窗口滾動條顯示。

I've shared a jsfiddle : http://jsfiddle.net/kPG3J/

</head>

<body>
<div id="wrapper">
    <div id="toolbar">Tool bar</div>
    <div id="chart">The Chart</div>
    <div id="grid">
        
Grid data
Grid data
Grid data
Grid data
Grid data
Grid data
Grid data
Grid data
Grid data
Grid data
Grid data
Grid data
Grid data
Grid data
Grid data
Grid data </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的高度和邊界量。 “邊距”由包裝器 div的定位處理,而不是 body 元素

轉載註明原文: 如何在沒有滾動的情況下將布局固定到瀏