jQuery 固定高度页面中带有滚动条的 Div
声明：本页面是StackOverFlow热门问题的中英对照翻译，遵循CC BY-SA 4.0协议，如果您需要使用它，必须同样遵循CC BY-SA许可，注明原文地址和作者信息，同时你必须将它归于原作者（不是我）：StackOverFlow
原文地址: http://stackoverflow.com/questions/7477607/
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
Div with scrollbar in fixed height page
提问by alf
I have this html structure:
我有这个 html 结构：
<body>
<div id="container">
<div id="header">Not empty</div>
<div id="content">
<div id="inner_header">Not empty</div>
<div id="scrollable_content">Very long content</div>
</div>
</div>
</body>
I want the page to have a fixed height equal to the height of the screen, and I also want a vertical scrollbar for the div scrollable_content.
我希望页面的固定高度等于屏幕的高度，并且我还希望 div 有一个垂直滚动条scrollable_content。
I have tried with these styles, but the page I get is larger than the screen, so I get two scrollbars:
我尝试过这些样式，但我得到的页面比屏幕大，所以我得到两个滚动条：
html, body {
height:100%;
}
div#container {
height:100%;
}
div#scrollable_content {
height:100%;
overflow-y:auto;
position:absolute;
}
How can I do this with CSS3?
我怎样才能用 CSS3 做到这一点？
Edit:I found a solution using jQuery (see below). I'd like to know if this is possible using only CSS3?
编辑：我找到了一个使用 jQuery 的解决方案（见下文）。我想知道这是否可以仅使用 CSS3？
Thanks in advance!
提前致谢！
回答by mrtsherman
When you absolutely position an element it comes out of the flow of the page. Please take a look at this fiddle. Note the green box causes two vertical scrollbars to appear.
当您绝对定位一个元素时，它就会脱离页面流。请看看这个小提琴。请注意，绿色框会导致出现两个垂直滚动条。
To get a single scrollbar that only appears below the header, you will need to modify your CSS. This CSS works with fixed height headers only.
要获得仅出现在标题下方的单个滚动条，您需要修改 CSS。此 CSS 仅适用于固定高度的标题。
- Zero out margin/padding on html/body and set
overflow:hiddenso that they do not trigger the main browser scrollbar - Set body to 100% height so that we can set 100% on divs inside of it
- Absolutely position the child div that will contain the scrollable content. Then use left, right, top, bottom to stretch it to fill the screen.
- 将 html/body 上的边距/填充清零并设置，
overflow:hidden以便它们不会触发主浏览器滚动条 - 将 body 设置为 100% 的高度，以便我们可以在其中的 div 上设置 100%
- 绝对定位将包含可滚动内容的子 div。然后使用左、右、上、下将其拉伸以填充屏幕。
/* set body to 100% so we can set 100% on internal divs */
/* zero margin/padding and set overflow to hidden to prevent default browser scrollbar */
html, body { height:100%; margin: 0; padding: 0; overflow: hidden; }
div { margin: 0; padding: 0; }
/* on child div give it absolute positioning and then use top/bottom to stretch it */
/* top must be equal to the height of the header */
div#scrollable_content {
position: absolute;
top: 50px;
bottom: 0px;
width: 100%;
overflow-y:auto;
border: 1px solid green;
}
回答by Ryan Ternier
My suggestion:
我的建议：
-Have some javascript running to re-size the container div / scrollable_content div to always be 100% height of the browser. If people resize, maximize etc. the browser window your heights will be off.
- 运行一些 javascript 来重新调整容器 div / scrollable_content div 的大小，使其始终为浏览器的 100% 高度。如果人们调整大小、最大化等浏览器窗口，您的高度将会关闭。
Depending on the website / application you could have this on a timer (setTimeout) or listening to the resize events of the browser
根据网站/应用程序，您可以在计时器（setTimeout）上使用它或侦听浏览器的调整大小事件
Check out: jQuery - dynamic div height
or
或者
http://css-discuss.incutio.com/wiki/Hundred_Percent_Height
http://css-discuss.incutio.com/wiki/Hundred_Percent_Height
Update:
更新：
Here's what I was talking about: http://jsfiddle.net/7TqsE/21/
这就是我所说的：http: //jsfiddle.net/7TqsE/21/
I just have it as a resize button, but you can see if you resize the bottom-right window, and click the button, it will resize that div for you to be the height of the containing div.
我只是将它作为一个调整大小按钮，但是您可以查看是否调整右下角窗口的大小，然后单击该按钮，它将为您调整该 div 的大小，使其成为包含 div 的高度。
You can also extend this by getting browser height (this example includes width). I didn't write this script, it's the same one spewed throughout the internet, I just copy it:
您还可以通过获取浏览器高度来扩展它（此示例包括宽度）。这个脚本不是我写的，它和互联网上流传的那个脚本是一样的，我只是复制了它：
if( typeof( window.innerWidth ) == 'number' ) {
//Non-IE
myWidth = window.innerWidth;
myHeight = window.innerHeight;
} else if( document.documentElement &&
( document.documentElement.clientWidth || document.documentElement.clientHeight ) ) {
//IE 6+ in 'standards compliant mode'
myWidth = document.documentElement.clientWidth;
myHeight = document.documentElement.clientHeight;
} else if( document.body && ( document.body.clientWidth || document.body.clientHeight ) ) {
//IE 4 compatible
myWidth = document.body.clientWidth;
myHeight = document.body.clientHeight;
}
回答by buhbang
using the code by mrtsherman, I've made your solution :)
使用 mrtsherman 的代码，我已经制定了您的解决方案:)
I hope this is it.
我希望就是这样。
回答by alf
This is the solution I've found so far using jQuery:
这是我迄今为止使用 jQuery 找到的解决方案：
window.setTimeout(function () {
$(document).ready(function () {
var ResizeTarget = $('#content');
ResizeTarget.resize(function () {
var target = $('#scrollable_content');
target.css('height', $(document).height() - $("#header").height() - $("#inner_header").height());
}).trigger('resize');
}); }, 500);
