Html CSS 100％高度，然后滚动DIV而不是页面
声明：本页面是StackOverFlow热门问题的中英对照翻译，遵循CC BY-SA 4.0协议，如果您需要使用它，必须同样遵循CC BY-SA许可，注明原文地址和作者信息，同时你必须将它归于原作者（不是我）：StackOverFlow
原文地址: http://stackoverflow.com/questions/2731496/
Warning: these are provided under cc-by-sa 4.0 license. You are free to use/share it, But you must attribute it to the original authors (not me):
StackOverFlow
CSS 100% Height, and then Scroll DIV not page
提问by Justin
Okay so I haven't been able to find a question with an answer yet, so I decided to make my own.
好的，所以我还没有找到有答案的问题，所以我决定自己做一个。
I am trying to create a 100% fluid layout, which technically I have done. http://stickystudios.ca/sandbox/stickyplanner/layout/index2.php
我正在尝试创建 100% 流畅的布局，从技术上讲我已经做到了。 http://stickystudios.ca/sandbox/stickyplanner/layout/index2.php
BUT, what I want to do now, is to make the page 100% in HEIGHT... But I don't want the page to scroll I want the inner DIV to scroll.
但是，我现在想要做的是使页面高度为 100%...但我不希望页面滚动我希望内部 DIV 滚动。
So I believe in short I want it to detect the height of the viewport screen, go 100%, and then IF content is longer then the screen, scroll the specific DIV, NOT the page.
所以我相信简而言之我希望它检测视口屏幕的高度，100%，然后如果内容比屏幕长，滚动特定的 DIV，而不是页面。
I hope this makes sense.
我希望这是有道理的。
Thanks in advance. Justin
提前致谢。贾斯汀
回答by John Hartsock
<html>
<body style="overflow:hidden;">
<div style="overflow:auto; position:absolute; top: 0; left:0; right:0; bottom:0">
</div>
</body>
</html>
That should do it for a simple case
对于一个简单的案例应该这样做
I believe this will work for your case
我相信这将适用于您的情况
<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>
this example will give you a static header and footer and allow the navigator and content area to be scrollable.
此示例将为您提供静态页眉和页脚，并允许导航器和内容区域可滚动。
回答by David
This is a different way to do this with all abs panels, it will fail on IE6, but I can provide the workaround CSS for IE6 if that is a requirement:
这是对所有 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>
回答by Mahesh Velaga
make overflow:autofor the div
使overflow:auto该DIV
回答by Gabriel Guimar?es
overflow:auto; on the DIV style You should just know that the size of the div should increase so it can show scrolls in it. If you increase the page's size (which should be with style="overflow: hidden;" on the body) it won't work.
溢出：自动；关于 DIV 样式您应该只知道 div 的大小应该增加，以便它可以在其中显示滚动。如果您增加页面的大小（应该在正文中使用 style="overflow: hidden;" ），它将不起作用。
回答by Vincent
If you don't want to use position:absolute (because it messes up your print out if your margins need to be different than all zeros) then you can do it with a little bit of JavaScript.
如果您不想使用 position:absolute （因为如果您的边距需要与全零不同，它会弄乱您的打印输出），那么您可以使用一点 JavaScript 来完成。
Set up your body and div like so to allow the div to scroll:
像这样设置你的 body 和 div 以允许 div 滚动：
<body style='overflow:hidden'>
<div id=scrollablediv style='overflow-y:auto;height:100%'>
Scrollable content goes here
</div>
</body>
This technique depends on the div having a set height, and for that we require JavaScript.
这种技术取决于具有设置高度的 div，为此我们需要 JavaScript。
Create a simple function to reset the height of your scrollable div
创建一个简单的函数来重置可滚动 div 的高度
function calculateDivHeight(){
$("#scrollablediv").height(window.innerHeight);
}
And then call this function on both page load and on resize.
然后在页面加载和调整大小时调用此函数。
// Gets called when the page loads
calculateDivHeight();
// Bind calculate height function to window resize
$(window).resize(function () {
calculateDivHeight();
}
回答by u7281846
You can try this:
你可以试试这个：
<!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>