0
不是另一個CSS滾動問題。是的，但請相信我，我對所有平常的事情都很滿意，但是這讓我感到瘋狂。如果你看看http://mailwarriors.co.uk/vocab/csstest.htm，你會看到一個帶有典型固定高度頁眉和頁腳的裸露布局，其餘的則分成幾個百分比大小的區域。在左邊，有一個固定寬度的div，包含兩個其他div，每個高度爲50％，分別稱爲Panel1和Panel2。如果瀏覽器窗口太小而無法顯示其所有內容，則面板1和麪板2將獲得垂直滾動條。但這是事情。您會看到滾動條適用於整個面板，包括每個頂部的固定高度的「標題」和「工具欄」div，而需要的是僅在每個實際的「內容」div上獲取滾動條面板。如果只有一個面板，我就知道該怎麼做。但是如圖所示，其中有兩個，我只是沒有看到它。任何人都可以建議嗎？下面是爲裸機頁面的HTML/CSS：CSS滾動挑戰案例
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<title>title </title>
<style media="screen" type="text/css">
html{overflow:hidden}
#header{position:absolute;top:0;right:0;bottom:84px;left:0;height:82px;padding:2px}
#menuctr{position:absolute;top:84px;bottom:16px;left:0;width:200px;border:solid 1px #000}
#panel1{height:50%;left:0;width:200px;overflow:auto}
#panel2{height:50%;left:0;width:200px;overflow:auto}
#main{position:absolute;top:84px;right:0;bottom:16px;left:204px;border:solid 1px #000}
#mainWrapper{position:absolute;top:84px;right:0px;bottom:16px;left:204px}
#mainTop{position:absolute;top:0;right:0;left:0;height:70%;}
#mainTopLeft{position:absolute;top:0;right:0;left:0;width:50%;height:100%}
#mainTopRight{position:absolute;right:0;top:0;width:50%;height:100%}
#mainTopRightTop{position:absolute;top:0;right:0;left:0;height:70%}
#mainTopRightBottom{position:absolute;bottom:0;left:0;right:0;height:30%}
#mainImage{position:absolute;top:0;right:0;bottom:0px;left:0;border:solid 1px #000}
#mainBottom{position:absolute;bottom:0;left:0;height:30%;width:100%;overflow:auto}
#mainSubImage{position:absolute;top:0px;right:0px;bottom:0;left:0;border:solid 1px #000}
#mainInformation{position:absolute;top:0px;right:0;bottom:0;left:0px;border:solid 1px #000; }
#footer{position:absolute;right:0;bottom:0;left:0;height:12px;padding:2px}
.caption{top:0;right:0;left:0;height:14px;border-bottom:solid 1px #000;font-weight:bold;padding:2px 1px 0 1px}
.toolbar{top:17px;right:0;left:0;height:16px;border-bottom:solid 1px #000;padding:2px}
</style>
</head>
<body>
<div id="header">
This is the title area
</div>
<div id="menuctr">
<div id="panel1">
<div class="caption">
Panel 1 title
</div>
<div class="toolbar">
[panel 1 toolbar]
</div>
<div>
panel 1 content<br />
panel 1 content<br />
panel 1 content<br />
panel 1 content<br />
panel 1 content<br />
panel 1 content<br />
panel 1 content<br />
panel 1 content<br />
panel 1 content<br />
panel 1 content<br />
panel 1 content<br />
panel 1 content<br />
panel 1 content<br />
panel 1 content<br />
panel 1 content<br />
panel 1 content<br />
panel 1 content<br />
panel 1 content<br />
panel 1 content<br />
panel 1 content<br />
panel 1 content<br />
panel 1 content<br />
panel 1 content<br />
panel 1 content<br />
panel 1 content<br />
</div>
</div>
<div id="panel2">
<div class="caption">
Panel 2 caption
</div>
<div class="toolbar">
[panel 2 toolbar]
</div>
<div >
panel 2 content<br />
panel 2 content<br />
panel 2 content<br />
panel 2 content<br />
panel 2 content<br />
panel 2 content<br />
panel 2 content<br />
panel 2 content<br />
panel 2 content<br />
panel 2 content<br />
panel 2 content<br />
panel 2 content<br />
panel 2 content<br />
panel 2 content<br />
panel 2 content<br />
panel 2 content<br />
panel 2 content<br />
panel 2 content<br />
panel 2 content<br />
panel 2 content<br />
panel 2 content<br />
panel 2 content<br />
panel 2 content<br />
panel 2 content<br />
panel 2 content<br />
panel 2 content<br />
</div>
</div>
</div>
<div id="footer">
This is the footer
</div>
<div id="mainWrapper">
<div id="mainTop">
<div id="mainTopLeft">
<div id="mainImage">
<div class="caption">
this is another caption
</div>
<div class="toolbar">
this is another toolbar
</div>
</div>
</div>
<div id="mainTopRight">
<div id="mainTopRightTop">
<div id="mainSubImage">
<div class="caption">
Yet another caption
</div>
<div class="toolbar">
Yet another toolbar
</div>
</div>
</div>
<div id="mainTopRightBottom">
<div id="mainInformation">
<div class="caption">
A caption again
</div>
<div class="toolbar">
A toolbar again
</div>
</div>
</div>
</div>
</div>
<div id="mainBottom">
Some other stuff
</div>
</div>
</body>
</html>
先感謝您的任何線索。
Peter。
是的，這就像Sajid的解決方案，至少與IE至少有關，我似乎需要panel1和panel2的'position：relative'來讓它工作。謝謝你們倆！ – 2011-04-12 20:04:47