好的，所以我还没有找到有答案的问题，所以我决定自己做。
我正在尝试创建一个 100% 流畅的布局，这在技术上我已经做到了。 http://stickystudios.ca/sandbox/stickyplanner/layout/index2.php
但是，我现在想要做的是使页面高度为 100%...但我不希望页面滚动我希望内部 DIV 滚动。
所以我相信简而言之我希望它检测视口屏幕的高度，100%，然后如果内容比屏幕长，滚动特定的 DIV，而不是页面。
我希望这是有道理的。
提前致谢。 贾斯汀
【问题讨论】：
为 div 制作 overflow:auto
【讨论】：
<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>
此示例将为您提供静态页眉和页脚，并允许导航器和内容区域可滚动。
【讨论】：
溢出：自动； 关于 DIV 风格 您应该只知道 div 的大小应该增加，以便它可以在其中显示滚动。 如果你增加页面的大小（应该在 body 上加上 style="overflow: hidden;" ） 它不会工作。
【讨论】：
这是对所有 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>
【讨论】：
如果您不想使用 position:absolute（因为如果您的边距需要与全零不同，它会弄乱您的打印输出），那么您可以使用一点 JavaScript 来完成。
像这样设置你的 body 和 div 以允许 div 滚动：
<body style='overflow:hidden'>
<div id=scrollablediv style='overflow-y:auto;height:100%'>
Scrollable content goes here
</div>
</body>
这种技术依赖于具有设定高度的 div，为此我们需要 JavaScript。
创建一个简单的函数来重置可滚动 div 的高度
function calculateDivHeight(){
$("#scrollablediv").height(window.innerHeight);
}
然后在页面加载和调整大小时调用此函数。
// Gets called when the page loads
calculateDivHeight();
// Bind calculate height function to window resize
$(window).resize(function () {
calculateDivHeight();
}
【讨论】：
height: 100%。但是它不需要 JS，只需将 所有祖先 上设置的高度设置为html。仅在滚动容器上需要设置overflow，而不是任何祖先。
你可以试试这个：
<!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>【讨论】：