CSS滚动挑战案例
问题描述：
不是另一个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。
答
我会在CSS
#panel1{height:50%;left:0;width:200px;overflow:hidden}
#panel1{height:50%;left:0;width:200px;overflow:hidden}
改变这一点，添加这个
.inner {left:0;width:100%;overflow:auto; position:absolute;bottom:0;top:40px;}
然后添加 “内部” 类内容的div
<div id="panel1">
<div class="caption">
Panel 1 title
</div>
<div class="toolbar">
[panel 1 toolbar]
</div>
<div class="inner">
panel 1 content<br />
.....
经过只是在戏所以才来在其他浏览器上也可以安全检查
答
您需要将面板设置为非滚动，并且只滚动内容。像这样：
<!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:hidden; position: relative;}
#panel2{height:50%;left:0;width:200px;overflow:hidden; position: relative;}
#panel1 .content, #panel2 .content { position: absolute; left: 0; top: 38px; bottom: 0; width: 100%; 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 class="content">
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 class="content">
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>
+0
完美！谢谢。我以为我已经尝试了很多，但我一定会一直围绕着它。你的工作。 – 2011-04-12 20:03:37
是的，这就像Sajid的解决方案，至少与IE至少有关，我似乎需要panel1和panel2的'position：relative'来让它工作。谢谢你们俩！ – 2011-04-12 20:04:47