CSS 静态标题 + 菜单，可滚动正文
声明：本页面是StackOverFlow热门问题的中英对照翻译，遵循CC BY-SA 4.0协议，如果您需要使用它，必须同样遵循CC BY-SA许可，注明原文地址和作者信息，同时你必须将它归于原作者（不是我）：StackOverFlow
原文地址: http://stackoverflow.com/questions/5196614/
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
Static header + menu, scrollable body
提问by Danicco
This is what I'm trying to accomplish:
这就是我想要完成的：
+--------screen-----------------------+ | ______________________ |*| | |_static_header______| |*| | | | | |*| | | content |menu | |*| | | scrollable |static| |*| | | | | |*| | | | | |*| | | | | |*| +-------------------------------------+
The content is of variable height, and the content scrollbar must be show in the page body (and not on it's on area). I managed to get the basic idea, but I'm having trouble to getting the content div in it's correct position when the scrollbar shows, and even if I set to always show the scrollbars, I can't use a fixed width because they differ from browser to browser.
内容高度可变，内容滚动条必须显示在页面正文中（而不是在它的区域上）。我设法得到了基本的想法，但是当滚动条显示时，我无法将内容 div 置于正确的位置，即使我设置为始终显示滚动条，我也无法使用固定宽度，因为它们不同从浏览器到浏览器。
<div style="position:absolute; background-color:Transparent; left:0px; right:0px; height:100px; z-index:2;">
<div style="background-color:Silver; width:1000px; height:100px; margin:0 auto;">
Header
</div>
</div>
<!-- Fixed div acting as the body "page" so the scrollbar shows as the page's -->
<div style="position:absolute; left:0px; top:0px; bottom:0px; right:0px; overflow-y:auto; padding-top:100px; z-index:1;">
<div style="position:relative; width:800px; height:100%; margin:0 auto; padding-right:200px;">
<div style="background-color:Orange; width:100%; height:900px;">
Content
</div>
</div>
</div>
<div style="position:absolute; left:50%; right:0px; padding-top:100px; z-index:0;">
<div style="width:500px; float:left;">
<div style="background-color:Green; float:right; width:200px; ">
Menu
</div>
</div>
</div>
In code above the content is off by the scrollbar width, how can I get it right with the rest of the page (ie. calculating it's position without considering the scrollbar width, even if it has one)?
在上面的代码中，内容被滚动条宽度关闭，我怎样才能在页面的其余部分正确使用它（即，在不考虑滚动条宽度的情况下计算它的位置，即使它有一个）？
采纳答案by Adam
If I understand your problem correctly this will be a solution: http://jsfiddle.net/7pJS8/
如果我正确理解您的问题，这将是一个解决方案：http: //jsfiddle.net/7pJS8/
回答by roryf
<style>
body {
padding: 0px;
}
.container {
margin: 0px auto;
position: relative;
width: 500px;
}
#header {
left: 0px;
position: fixed;
top: 0px;
width: 100%;
z-index: 1000;
}
#header .container {
background: blue;
height: 100px;
}
#content {
background: green;
height: 1500px;
margin-top: 100px;
}
#content .inner {
margin-right: 200px;
}
#sidebar {
left: 0px;
position: fixed;
top: 100px;
width: 100%;
z-index: 1000;
}
#sidebar .inner {
background: red;
height: 200px;
position: absolute;
right: 0px;
top: 0px;
width: 200px;
}
</style>
<div id="header">
<div class="container">
header
</div>
</div>
<div id="content" class="container">
<div class="inner">
content
</div>
</div>
<div id="sidebar">
<div class="container">
<div class="inner">
sidebar
</div>
</div>
</div>
Possible solution: http://jsfiddle.net/zWERN/
可能的解决方案：http: //jsfiddle.net/zWERN/
回答by AlikElzin-kilaka
Setting a scroll on all of the page, might result in a disappearing header and menu - when the content is long.
在所有页面上设置滚动，可能会导致标题和菜单消失 - 当内容很长时。
What you're looking for is a subset of the Holy Grail design.
您正在寻找的是圣杯设计的一个子集。
Here's an implementation using the flex display:
下面是一个使用 flex 显示的实现：
<!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>
<!-- No need for 'flex-direction: row' because it's the default value -->
<div style="display: flex; flex: 1">
<div>NAV|</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>
<div>|SIDE</div>
</div>
<div>------------<br/>FOOTER</div>
</body>
</html>
回答by Jan Daniel
Doesn't position:fixedsolve your problem? If you set position:fixedto header and menu div?
没有position:fixed解决你的问题？如果设置position:fixed为标题和菜单 div？
回答by Brian
There is ways to do it with fixed heights and then use the overflow property on the scrollable areas. However, that's not good practice, what you should look at is using a sticky header or scrolling header (one that follows the viewing area as the user scrolls up and down) from jQuery or your JS library of choice.
有一些方法可以使用固定高度来完成，然后在可滚动区域上使用溢出属性。但是，这不是一个好的做法，您应该考虑使用来自 jQuery 或您选择的 JS 库的粘性标题或滚动标题（当用户上下滚动时跟随查看区域的标题）。
