好的,所以我还没有找到答案的问题,所以我决定自己做.
我正在尝试创建一个100%流畅的布局,技术上我已经完成了. http://stickystudios.ca/sandbox/stickyplanner/layout/index2.php
但是,我现在要做的是将页面100%设置为HEIGHT ...但我不希望页面滚动我希望内部DIV滚动.
所以我简单地相信我希望它能够检测视口屏幕的高度,100%,然后IF内容比屏幕更长,滚动特定的DIV,而不是页面.
我希望这是有道理的.
提前致谢.贾斯汀
Joh*_*ock 59
<html>
<body style="overflow:hidden;">
<div style="overflow:auto; position:absolute; top: 0; left:0; right:0; bottom:0">
</div>
</body>
</html>
这应该是一个简单的案例
我相信这对你的情况有用
<html>
<body style="overflow:hidden;">
<div id="header" style="overflow:hidden; position:absolute; top:0; left:0; height:50px;"></div>
<div id="leftNav" style="overflow:auto; position:absolute; top:50px; left:0; right:200px; bottom:50px;"></div>
<div id="mainContent" style="overflow:auto; position:absolute; top:50px; left: 200px; right:0; bottom:50px;"></div>
<div id="footer" style="overflow:hidden; position:absolute; bottom:0; left:0; height:50px"></div>
</body>
</html>
此示例将为您提供静态页眉和页脚,并允许导航器和内容区域可滚动.
这是与所有abs面板执行此操作的不同方法,它将在IE6上失败,但如果需要,我可以为IE6提供解决方法CSS:
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.1//EN" "http://www.w3.org/TR/xhtml11/DTD/xhtml11.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<title>Fluid Layout</title>
<meta http-equiv="content-type" content="application/xhtml+xml; charset=UTF-8" />
<style rel="stylesheet" type="text/css">
body { background-color:black; margin:0px; padding:0px; }
.pageBox { position:absolute; top:20px; left:20px; right:20px; bottom:20px; min-width:200px}
.headerBox { position:absolute; width:100%; height:50px; background-color:#333; }
.contentBox { position:absolute; width:100%; top:52px; bottom:32px; background-color:blue; }
.footerBox { position:absolute; width:100%; height:30px; background-color:#ccc; bottom:0px; }
.contentBoxLeft { position:absolute; width:20%; height:100%; background-color:#b6b6b6; }
.contentBoxRight { position:absolute; width:80%; left:20%; height:100%; background-color:white; }
.contentBoxLeft,
.contentBoxRight { overflow:auto; overflow-x:hidden; }
</style>
</head>
<body>
<div class="pageBox">
<div class="headerBox">Header</div>
<div class="contentBox">
<div class="contentBoxLeft">ContentLeft asdf asdf adsf assf</div>
<div class="contentBoxRight">ContentRight asdf asdfa dasf asdf asdfd asfasd fdasfasdf dasfsad fdasfds<br /><br />asdfsad ff asdf asdfasd</div>
</div>
<div class="footerBox">Footer</div>
</div>
</body>
</html>