CSS 100％高度，然后滚动DIV不页
好，所以我还没有find答案的问题，所以我决定做我自己的。
我正在尝试创build一个100％的stream体布局，这在技术上已经完成了。 http://stickystudios.ca/sandbox/stickyplanner/layout/index2.php
但是，我想要它现在要做的，是使页面高度100％…但我不希望页面滚动我想要内部DIV滚动。
所以我相信简而言之，我希望它能检测到视口屏幕的高度，走100％，然后IF内容比屏幕更长，滚动特定的DIV，而不是页面。
我希望这是有道理的。
提前致谢。 贾斯汀
<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的变通办法，如果这是一个要求：
<!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>
使overflow:auto为div
溢出：汽车; 在DIV风格你应该知道div的大小应该增加，所以它可以在其中显示滚动。 如果你增加页面的大小（在body上应该是style =“overflow：hidden;”），它将不起作用。
如果你不想使用position：absolute（因为如果你的边距需要不是全零），那么你可以用一点JavaScript来做。
设置你的身体和div像这样，让div滚动：
<body style='overflow:hidden'> <div id=scrollablediv style='overflow-y:auto;height:100%'> Scrollable content goes here </div> </body>
这个技巧依赖于div的高度，为此我们需要JavaScript。
创build一个简单的函数来重置滚动div的高度
function calculateDivHeight(){ $("#scrollablediv").height(window.innerHeight); }
然后在页面加载和resize时调用此函数。
// Gets called when the page loads calculateDivHeight(); // Bind calculate height function to window resize $(window).resize(function () { calculateDivHeight(); }
你可以试试这个：
<!DOCTYPE> <html xmlns="http://www.w3.org/1999/xhtml"> <head> <meta http-equiv="content-type" content="application/xhtml+xml; charset=UTF-8" /> <style rel="stylesheet" type="text/css"> .modal{width:300px;border:1px solid red;overflow: auto;opacity: 0.5;z-index:2;} .bg{background:-webkit-linear-gradient(top,red,green,yellow);width:1000px;height:2000px;top:0;left:0;} .btn{position:fixed;top:100px;left:100px;} </style> </head> <body style='padding:0px;margin:0px;'> <div class='bg' style='position:static'></div> <div class='modal' style='display:none'></div> <button class='btn'>toggle </button> </body> <script> var str='',count=200; while(count--){ str+=count+'<br>'; } var modal=document.querySelector('.modal'),bg=document.querySelector('.bg'), btn=document.querySelector('.btn'),body=document.querySelector('body'); modal.innerHTML=str; btn.onclick=function(){ if(bg.style.position=='fixed'){ bg.style.position='static'; window.scrollTo(0,bg.storeTop); }else{ let top=bg.storeTop=body.scrollTop; bg.style.position='fixed'; bg.style.top=(0-top)+'px'; } modal.style.display=modal.style.display=='none'?'block':'none'; } </script> </html>
