CSS 标题 div 保持在顶部，垂直滚动 div 位于下方，滚动条仅附加到该 div
声明：本页面是StackOverFlow热门问题的中英对照翻译，遵循CC BY-SA 4.0协议，如果您需要使用它，必须同样遵循CC BY-SA许可，注明原文地址和作者信息，同时你必须将它归于原作者（不是我）：StackOverFlow
原文地址: http://stackoverflow.com/questions/9677894/
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
Header div stays at top, vertical scrolling div below with scrollbar only attached to that div
提问by Garywoo
I have 2 main divs, the header and a scrolling list contained in a div. I want the header to always remain at the top of the page, and the scrolling list below. The scrollbar should be attached to the scrolling div and not to the whole page, i.e. the scrollbar does not appear on the right of the header, just the scrolling div.
我有 2 个主要的 div，一个 div 中包含的标题和一个滚动列表。我希望标题始终位于页面顶部，滚动列表位于下方。滚动条应该附加到滚动div而不是整个页面，即滚动条不会出现在标题的右侧，只是滚动div。
This is what i'm trying to achieve:
这就是我想要实现的目标：
______________________
|_______header_______|
| |*|
| Container Div |*|
| |*|
| |*|
| |*|
| |*|
| |*|
----------------------
* = scrollbar
The layout should be fluid and if the window is stretched vertically, only the container div and it's scrollbar should get longer.
布局应该是流畅的，如果窗口垂直拉伸，只有容器 div 和它的滚动条应该变长。
I don't want to position the header position: fixed;as then the scrollbar will be on the right of it instead of underneath it.
我不想定位标题，position: fixed;因为滚动条将位于它的右侧而不是它的下方。
回答by bhamlin
HTML:
HTML：
?<div class="header">This is the header</div>
<div class="content">This is the content</div>?????????????????????????????????
CSS:
CSS：
?.header
{
height:50px;
}
.content
{
position:absolute;
top: 50px;
left:0px;
right:0px;
bottom:0px;
overflow-y:scroll;
}?
回答by AlikElzin-kilaka
Found the flex magic.
发现了 flex 魔法。
Here's an example of how to do a fixed header and a scrollable content. Code:
下面是一个如何制作固定标题和可滚动内容的示例。代码：
<!DOCTYPE html>
<html style="height: 100%">
<head>
<meta charset=utf-8 />
<title>Holy Grail</title>
<!-- Reset browser defaults -->
<link rel="stylesheet" href="reset.css">
</head>
<body style="display: flex; height: 100%; flex-direction: column">
<div>HEADER<br/>------------
</div>
<div style="flex: 1; overflow: auto">
CONTENT - START<br/>
<script>
for (var i=0 ; i<1000 ; ++i) {
document.write(" Very long content!");
}
</script>
<br/>CONTENT - END
</div>
</body>
</html>
* The advantage of the flex solution is that the content is independent of other parts of the layout. For example, the content doesn't need to know height of the header.
* flex 方案的优点是内容独立于布局的其他部分。例如，内容不需要知道标题的高度。
For a full Holy Grailimplementation (header, footer, nav, side, and content), using flex display, go to here.
回答by Dips
回答by PasteBT
You need to use js get better height for body div
您需要使用 js 获得更好的 body div 高度
<html><body>
<div id="head" style="height:50px; width=100%; font-size:50px;">This is head</div>
<div id="body" style="height:700px; font-size:100px; white-space:pre-wrap; overflow:scroll;">
This is body
T
h
i
s
i
s
b
o
d
y
</div>
</body></html>
