Html 固定页眉、页脚和侧边栏在中心滚动内容区域
声明：本页面是StackOverFlow热门问题的中英对照翻译，遵循CC BY-SA 4.0协议，如果您需要使用它，必须同样遵循CC BY-SA许可，注明原文地址和作者信息，同时你必须将它归于原作者（不是我）：StackOverFlow
原文地址: http://stackoverflow.com/questions/10056583/
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
Fixed Header, Footer, and Sidebars with scrolling content area in center
提问by glarkou
Starting with this Demo Template, I would like to create this layout:
从这个Demo Template 开始，我想创建这个布局：
But I have the following problems:
但我有以下问题：
- The two sidebars are not contained inside the scrollable content div.
- The content div does not take a fixed size
- The scrollable content does not present a scrollbar when it overflows
- It is preferred if the browser's main scrollbar is used
- 两个侧边栏不包含在可滚动内容 div 内。
- 内容 div 没有固定大小
- 可滚动内容溢出时不显示滚动条
- 最好使用浏览器的主滚动条
Can someone help me to fix these issues?
有人可以帮我解决这些问题吗？
回答by 0b10011
Using display:grid
使用 display:grid
This uses several new features of CSS that may or may not be supported in your browser of choice. These include Grid Layout, CSS Variables, and position:sticky. CSS Variables can be worked around with static values and Grid/position:stickycan degrade gracefully with @supports.
这使用了 CSS 的几个新功能，您选择的浏览器可能支持也可能不支持。这些包括网格布局、CSS 变量和position:sticky. CSS 变量可以使用静态值解决，而 Grid/position:sticky可以使用@supports.
/* Remove unnecessary margins/padding */
html, body { margin: 0; padding: 0 }
.wrapper {
display: grid;
/* Header and footer span the entire width, sidebars and content are fixed, with empty space on sides */
grid-template-areas:
"header header header header header"
"empty_left sidebar_1 content sidebar_2 empty_right"
"footer footer footer footer footer";
/* Only expand middle section vertically (content and sidebars) */
grid-template-rows: 0fr 1fr 0fr;
/* 100% width, but static widths for content and sidebars */
grid-template-columns: 1fr 100px 400px 100px 1fr;
/* Force grid to be at least the height of the screen */
min-height: 100vh;
}
.header {
grid-area: header;
/* Stick header to top of grid */
position: sticky;
top: 0;
/* Ensure header appears on top of content/sidebars */
z-index: 1;
/* General appearance */
background-color: #FCFF34;
text-align: center;
font-size: 1rem;
line-height: 1.5;
padding: 1rem;
}
/* Save header height to properly set `padding-top` and `margin-top` for sticky content */
:root {
--header-height: calc(1rem * 1.5 + 1rem * 2);
}
.sidebar-1 {
grid-area: sidebar_1;
}
.sidebar-2 {
grid-area: sidebar_2;
}
.sidebar-1,
.sidebar-2 {
display: flex;
flex-direction: column;
position: sticky;
top: 0;
/* Styling to match reference */
background-color: #BC514F;
}
.content {
grid-area: content;
/* General appearance */
background-color: #99BB5E;
}
.footer {
grid-area: footer;
/* Stick footer to bottom of grid */
position: sticky;
bottom: 0;
/* General appearance */
background-color: #FCFF34;
text-align: center;
font-size: .8rem;
line-height: 1.5;
padding: .5rem;
}
/* Save footer height to properly set `bottom` and `min-height` for sticky content */
:root {
--footer-height: calc(.8rem * 1.5 + .5rem * 2);
}
.sticky-spacer {
flex-grow: 1;
}
.sticky-content {
position: sticky;
bottom: var(--footer-height);
min-height: calc(100vh - var(--footer-height));
box-sizing: border-box;
--padding: 10px;
padding:
calc(var(--header-height) + var(--padding))
var(--padding)
var(--padding);
margin-top: calc(0px - var(--header-height));
}<div class="wrapper">
<div class="header">Header (Absolute)</div>
<div class="sidebar-1">
<div class="sticky-spacer"></div>
<div class="sticky-content">Sidebar 1 Absolute position, Fixed width</div>
</div>
<div class="content">
<div class="sticky-spacer"></div>
<div class="sticky-content">
Scrollable content<br><br>
line 1<br><br>
line 2<br><br>
line 3<br><br>
line 4<br><br>
line 5<br><br>
line 6<br><br>
line 7<br><br>
line 8<br><br>
line 9<br><br>
line 10<br><br>
line 11<br><br>
line 12<br><br>
line 13<br><br>
line 14<br><br>
line 15<br><br>
line 16<br><br>
line 17<br><br>
line 18<br><br>
line 19<br><br>
line 20
</div>
</div>
<div class="sidebar-2">
<div class="sticky-spacer"></div>
<div class="sticky-content">
Sidebar 2 Absolute position, Fixed width<br><br>
line 1<br><br>
line 2<br><br>
line 3<br><br>
line 4<br><br>
line 5<br><br>
line 6<br><br>
line 7<br><br>
line 8<br><br>
line 9<br><br>
line 10
</div>
</div>
<div class="footer">Footer (Absolute)</div>
</div>Scrollbar in main content container
主内容容器中的滚动条
The content box (including the sidebars) can be set to any type of width (percent, pixel, etc). Only the scrollable content area will scroll (sidebars/footer/header will just overflow the box). I'd suggest adding some media queries to break out of the sidebars so content isn't hidden on smaller devices, or set a min-heighton the content box and a min-widthon the body.
内容框（包括侧边栏）可以设置为任何类型的宽度（百分比、像素等）。只有可滚动的内容区域会滚动（侧边栏/页脚/页眉只会溢出框）。我建议添加一些媒体查询来打破侧边栏，这样内容就不会隐藏在较小的设备上，或者min-height在内容框上设置 a并min-width在body.
html, body {
height:100%;
margin:0;
padding:0;
}
header{
width: 100%;
background: yellow;
position: fixed;
top: 0;
height: 60px !important;
opacity:.8;
}
.content {
position:relative;
height: 100%;
width:600px; /* Sizing - any length */
padding:60px 0 30px 0; /* Header height and footer height */
margin:0 auto 0 auto; /* Center content */
-moz-box-sizing:border-box;
-webkit-box-sizing:border-box;
-o-box-sizing:border-box;
-ms-box-sizing:border-box;
box-sizing:border-box;
}
.sidebar1, .sidebar2 {
background: red;
top:60px;
bottom:30px;
width: 100px;
position:absolute;
-moz-box-sizing:border-box;
-webkit-box-sizing:border-box;
-o-box-sizing:border-box;
-ms-box-sizing:border-box;
box-sizing:border-box;
}
.sidebar1 {
left:0;
}
.sidebar2 {
right: 0;
}
#scrollable2 {
background:green;
height: 100%;
min-width: 300px;
margin-left: 100px;
margin-right: 100px;
overflow:auto;
-moz-box-sizing:border-box;
-webkit-box-sizing:border-box;
-o-box-sizing:border-box;
-ms-box-sizing:border-box;
box-sizing:border-box;
}
footer {
width: 100%;
background: yellow;
position: fixed;
bottom: 0;
height: 30px;
}<!-- Always on top: Position Fixed-->
<header>
header
</header>
<!-- Fixed size after header-->
<div class="content">
<!-- Always on top. Fixed position, fixed width, relative to content width-->
<div class="sidebar1">
sidebar-left
</div>
<!-- Scrollable div with main content -->
<div id="scrollable2">
content-main<br>
content-main<br>
content-main<br>
content-main<br>
content-main<br>
content-main<br>
content-main<br>
content-main<br>
content-main<br>
content-main<br>
content-main<br>
content-main<br>
content-main<br>
content-main<br>
content-main<br>
content-main<br>
content-main<br>
content-main<br>
content-main<br>
content-main<br>
content-main<br>
content-main<br>
content-main<br>
content-main<br>
content-main<br>
content-main<br>
content-main<br>
content-main<br>
content-main<br>
content-main<br>
content-main<br>
</div>
<!-- Always on top. Fixed position, fixed width, relative to content width -->
<div class="sidebar2">
sidebar-right
</div>
</div>
<!-- Always at the end of the page -->
<footer>
footer
</footer>Using the browser's main scrollbar
使用浏览器的主滚动条
While using the browser's main scrollbar is possible, it also causes the sidebars to scroll with the page.
虽然可以使用浏览器的主滚动条，但也会导致侧边栏随页面滚动。
html, body {
height:100%;
margin:0;
padding:0;
}
header{
width: 100%;
background: yellow;
position: fixed;
top: 0;
height: 60px !important;
z-index:100;
}
.content {
position:relative;
min-height: 100%;
width:600px; /* Sizing - any length */
padding:60px 0 30px 0; /* Header height and footer height */
margin:0 auto 0 auto; /* Center content */
}
.sidebar1, .sidebar2 {
background: red;
height:100%;
width: 100px;
top:0;
padding-top:60px;
position:absolute;
-moz-box-sizing:border-box;
-webkit-box-sizing:border-box;
-o-box-sizing:border-box;
-ms-box-sizing:border-box;
box-sizing:border-box;
}
.sidebar1 {
left:0;
}
.sidebar2 {
right: 0;
}
#scrollable2 {
height:100%;
background:green;
min-width: 300px;
margin-left: 100px;
margin-right: 100px;
-moz-box-sizing:border-box;
-webkit-box-sizing:border-box;
-o-box-sizing:border-box;
-ms-box-sizing:border-box;
box-sizing:border-box;
}
footer {
width: 100%;
background: yellow;
position: fixed;
bottom: 0;
height: 30px;
}<!-- Always on top: Position Fixed-->
<header>
header
</header>
<!-- Fixed size after header-->
<div class="content">
<!-- Always on top. Fixed position, fixed width, relative to content width-->
<div class="sidebar1">
sidebar-left
</div>
<!-- Scrollable div with main content -->
<div id="scrollable2">
content-main<br>
content-main<br>
content-main<br>
content-main<br>
content-main<br>
content-main<br>
content-main<br>
content-main<br>
content-main<br>
content-main<br>
content-main<br>
content-main<br>
content-main<br>
content-main<br>
content-main<br>
content-main<br>
content-main<br>
content-main<br>
content-main<br>
content-main<br>
content-main<br>
content-main<br>
content-main<br>
content-main<br>
content-main<br>
content-main<br>
content-main<br>
content-main<br>
content-main<br>
content-main<br>
content-main<br>
</div>
<!-- Always on top. Fixed position, fixed width, relative to content width -->
<div class="sidebar2">
sidebar-right
</div>
</div>
<!-- Always at the end of the page -->
<footer>
footer
</footer>回答by Sorter
EDIT
1.Add positionproperty as absolutefor the div you wish to fix .
2.Keep the body overflowproperty auto.
编辑
1.Addposition属性作为absolute你想要修复的 div。
2.保持身体overflow属性auto。
Note: setting the z-index of the body to -1 will make the rest of body inaccessible.
Reference : http://limpid.nl/lab/css/fixed/
注意：将主体的 z-index 设置为 -1 将使主体的其余部分无法访问。
参考：http: //limpid.nl/lab/css/fixed/
