CSS 粘性页眉/页脚和完全拉伸的中间区域？
声明：本页面是StackOverFlow热门问题的中英对照翻译，遵循CC BY-SA 4.0协议，如果您需要使用它，必须同样遵循CC BY-SA许可，注明原文地址和作者信息，同时你必须将它归于原作者（不是我）：StackOverFlow
原文地址: http://stackoverflow.com/questions/14543327/
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 Sticky Header/Footer and Fully Stretched Middle Area?
提问by u775856
With CSS, how can i simply get a page with sticky header and footerwhich are appearing forever, whenever the page is scrolling or not. I found some sample online, but what i additional want is, the middle content area should be a 100% stretched area between header and footerwhatever the browser size is.
使用 CSS，我怎样才能简单地获得一个sticky header and footer永远出现的页面，只要该页面是scrolling or not. 我在网上找到了一些示例，但我另外想要的是，中间内容区域应该是100% stretched area between header and footer浏览器大小的任何内容。
I mean, most of the Samples i found, are making Header and Footer sticky correctly.., but these are just floatingand actually covering the Top and Bottom parts of the 'middle' content area. That's not what i really want.
我的意思是，我发现的大多数示例都正确地使页眉和页脚具有粘性……但these are just floating实际上covering the Top and Bottom parts of the 'middle' content area。那不是我真正想要的。
回答by charlietfl
Can use absolute position for all 3 elements.
可以对所有 3 个元素使用绝对位置。
#header,#footer,#content { position:absolute; right:0;left:0}
#header{
height:100px; top:0;
}
#footer{
height:100px; bottom:0;
}
#content{
top:100px;
bottom:100px;
overflow:hidden; /* use this if don't want any window scrollbars and use an inner element for scrolling*/
}
回答by BRebey
The solutions presented above work for very simple layout with no border, margin, and/or padding. Many, many solutions that you'll find on the Net will work for this.
上面介绍的解决方案适用于没有边框、边距和/或填充的非常简单的布局。您可以在网上找到的许多解决方案都适用于此。
However, almost all solutions fall completely apart if you simply add border, margin, and/or padding to any or all of your Divs.
但是，如果您简单地向任何或所有 Div 添加边框、边距和/或填充，几乎所有解决方案都会完全崩溃。
Flex Boxes (CSS display:flex;) are incredibly powerful for this, and they work perfectly with any combination of border, margin, and/or padding.
Flex Boxes (CSS display:flex;) 在这方面非常强大，它们可以完美地与边框、边距和/或填充的任何组合配合使用。
They can portion your screen space into as many Divs as you need, using fixed size, percentage size, or "whatever's left" for each inner Div. These can be in any order, so you aren't limited to just headers and/or footers. They can also be used horizontally instead of vertically, and can next.
他们可以根据需要将您的屏幕空间分成多个 Div，为每个内部 Div 使用固定大小、百分比大小或“剩下的”。这些可以按任何顺序排列，因此您不仅限于页眉和/或页脚。它们也可以水平使用而不是垂直使用，然后可以使用。
So you could have, say, a fixed-size header, a 20% footer, and a "whatever's left" client area between them that sizes dynamically. Inside that client area, in turn, you could have, say, a percentage-width menu bar at the left edge of the client area, a fixed-width vertical divider next to that, and a client area that takes up "whatever's left" to the right of that.
所以你可以有，比如说，一个固定大小的页眉，一个 20% 的页脚，以及在它们之间动态调整大小的“剩下的”客户区。反过来，在该客户区域内，您可以在客户区域的左边缘有一个百分比宽度的菜单栏，旁边有一个固定宽度的垂直分隔线，以及一个占据“剩下的任何东西”的客户区域在那的右边。
Here's a Fiddle to demonstrate all of this. The relevant CSS is remarkably simple. CSS Flex Box (display:flex;) Demonstration with Borders/Margin/Padding
这是一个 Fiddle 来演示所有这些。相关的 CSS 非常简单。 CSS Flex Box (display:flex;) 带边框/边距/填充的演示
For instance, here are two CSS classes that create containers that will flow their contained Divs either horizontally or vertically, respectively:
例如，这里有两个 CSS 类，它们创建将分别水平或垂直流动其包含的 Div 的容器：
.HorFlexContainer {
display: flex;
flex-direction: row;
flex-wrap: wrap;
flex: 1; /* this essentially means "use all parent's inner width */
}
.VertFlexContainer {
display: flex;
flex-direction: column;
flex-wrap: wrap;
flex: 1; /* this essentially means "use all parent's inner height */
}
The Fiddle above really shows it all off, though.
不过，上面的小提琴确实展示了这一切。
For reference, see this excellent article by Chris Coyier: Flexbox Tutorial
作为参考，请参阅 Chris Coyier 的这篇优秀文章： Flexbox 教程
Hope this all helps!
希望这一切都有帮助！
回答by rafaelbiten
You're probably looking for the "position: fixed;" property, and setting the header to top: 0; and the footer to bottom: 0; You might also consider some padding to your "content area" to account for that header and footer space...
您可能正在寻找“位置：固定；” 属性，并将标题设置为 top: 0; 和底部的页脚：0; 您还可以考虑对“内容区域”进行一些填充以说明页眉和页脚空间...
From the top of my head you would have something like:
从我的头顶看，你会有这样的事情：
header { position: fixed; top: 0; height: 100px; }
footer { position: fixed; bottom: 0; height: 100px; }
#container { padding: 100px 0; }
If you're using some kind of background on your container and want to stretch it, a height: 100%; should do...
如果您在容器上使用某种背景并想要拉伸它，则高度：100%；应该做...
I've never found a good way to use this kind of layout though... =\
我从来没有找到使用这种布局的好方法...... =\
