CSS 让 div 占据 100% 的主体高度，减去固定高度的页眉和页脚
声明：本页面是StackOverFlow热门问题的中英对照翻译，遵循CC BY-SA 4.0协议，如果您需要使用它，必须同样遵循CC BY-SA许可，注明原文地址和作者信息，同时你必须将它归于原作者（不是我）：StackOverFlow
原文地址: http://stackoverflow.com/questions/15021573/
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
Get div to take up 100% body height, minus fixed-height header and footer
提问by Richard
From my research, this appears to be an absolutely classic CSS question, but I can't find a definitive answer - so StackOverflow it is.
从我的研究来看，这似乎是一个绝对经典的 CSS 问题，但我找不到明确的答案 - 所以是 StackOverflow。
How do I set a content div to take up 100% of the body height, minus the height taken up by a fixed-height header and footer?
如何将内容 div 设置为占据主体高度的 100%，减去固定高度的页眉和页脚所占据的高度？
<body>
<header>title etc</header>
<div id="content">body content</div>
<footer>copyright etc</footer>
</body>
//CSS
html, body {
height: 100%;
}
header {
height: 50px;
}
footer {
height: 50px;
}
#content {
height: 100% of the body height, minus header & footer
}
I would like to use pure CSS, and for the answer to be bulletproof across browsers.
我想使用纯 CSS，并且答案是跨浏览器防弹的。
采纳答案by Pete
this version will work in all the latest browsers and ie8 if you have the modernizr script (if not just change headerand footerinto divs):
这个版本将在所有最新的浏览器工作，IE8，如果你有Modernizr的脚本（如果不只是改变header和footer成divS）：
html,
body {
min-height: 100%;
padding: 0;
margin: 0;
}
#wrapper {
padding: 50px 0;
position: absolute;
top: 0;
bottom: 0;
left: 0;
right: 0;
}
#content {
min-height: 100%;
background-color: green;
}
header {
margin-top: -50px;
height: 50px;
background-color: red;
}
footer {
margin-bottom: -50px;
height: 50px;
background-color: red;
}
p {
margin: 0;
padding: 0 0 1em 0;
}<div id="wrapper">
<header>dfs</header>
<div id="content">
</div>
<footer>sdf</footer>
</div>Scrolling with content: Fiddle
随内容滚动： 小提琴
回答by agriboz
As far as it is not cross browser solution, you might be take advantage of using calc(expression)to achive that.
就它不是跨浏览器的解决方案而言，您可能会利用使用calc(expression)来实现这一点。
html, body {
height: 100%;
}
header {
height: 50px;
background-color: tomato
}
#content {
height: -moz-calc(100% - 100px); /* Firefox */
height: -webkit-calc(100% - 100px); /* Chrome, Safari */
height: calc(100% - 100px); /* IE9+ and future browsers */
background-color: yellow
}
footer {
height: 50px;
background-color: grey;
}
If you want to know more about calc(expression)you'd better to visit thissite.
如果你想了解更多关于calc(expression)你最好访问这个网站。
回答by Matt L
This still came up as the top Google result when I was trying to find an answer to this question. I didn't have to support older browsers in my project and I feel like I found a better, simpler solution in flex-box. The CSS snippet below is all that is necessary.
当我试图找到这个问题的答案时，这仍然是最重要的谷歌结果。我不必在我的项目中支持旧浏览器，我觉得我在flex-box 中找到了一个更好、更简单的解决方案。下面的 CSS 片段是所有必需的。
I have also shown how to make the main content scrollable if the screen height is too small.
如果屏幕高度太小，我还展示了如何使主要内容可滚动。
html,
body {
height: 100%;
display: flex;
flex-direction: column;
}
header {
min-height: 60px;
}
main {
flex-grow: 1;
overflow: auto;
}
footer {
min-height: 30px;
}<body style="margin: 0px; font-family: Helvetica; font-size: 18px;">
<header style="background-color: lightsteelblue; padding: 2px;">Hello</header>
<main style="overflow: auto; background-color: lightgrey; padding: 2px;">
<article style="height: 400px;">
Goodbye
</article>
</main>
<footer style="background-color: lightsteelblue; padding: 2px;">I don't know why you say, "Goodbye"; I say, "Hello."</footer>
</body>回答by Eric Warnke
The new, modern way to do this is to calculate the vertical height by subtracting the height of both the header and the footer from the vertical-height of the viewport.
一种新的现代方法是通过从视口的垂直高度中减去页眉和页脚的高度来计算垂直高度。
//CSS
header {
height: 50px;
}
footer {
height: 50px;
}
#content {
height: calc(100vh - 50px - 50px);
}
回答by AlikElzin-kilaka
Trying to calculate the header and footer is bad :( A design should be simple, self explanatory. Plain easy. Calculations are just...not easy. Not easy for human and a bit hard on machines.
试图计算页眉和页脚是不好的:( 设计应该简单，不言自明。简单易行。计算只是......不容易。对人类来说不容易，在机器上有点困难。
What you're looking for is a subset of the Holy Grail design.
您正在寻找的是圣杯设计的一个子集。
Here's an implementation using the flex display. It includes side bars in addition to the footer and header. Enjoy:
下面是一个使用 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 Jefferson Henrique C. Soares
You can take advatange of the css property Box Sizing.
您可以利用 css 属性Box Sizing。
#content {
height: 100%;
-webkit-box-sizing: border-box; /* Safari/Chrome, other WebKit */
-moz-box-sizing: border-box; /* Firefox, other Gecko */
box-sizing: border-box; /* Opera/IE 8+ */
padding-top: 50px;
margin-top: -50px;
padding-bottom: 50px;
margin-bottom: -50px;
}
See the JsFiddle.
请参阅JsFiddle。
回答by mti2935
This question has been pretty well answered, but I'm taking the liberty of adding a javascript solution. Just give the element that you want to 'expand' the id footerspacerdiv, and this javascript snippet will expand that div until the page takes up the full height of the browser window.
这个问题已经得到很好的回答，但我冒昧地添加了一个 javascript 解决方案。只需提供您想要“扩展” id 的元素，footerspacerdiv此 javascript 代码段将扩展该 div 直到页面占据浏览器窗口的整个高度。
It works based on the observation that, when a page is less than the full height of the browser window, document.body.scrollHeight is equal to document.body.clientHeight. The while loop increases the height of footerspacerdivuntil document.body.scrollHeight is greater than document.body.clientHeight. At this point, footerspacerdivwill actually be 1 pixel too tall, and the browser will show a vertical scroll bar. So, the last line of the script reduces the height of footerspacerdivby one pixel to make the page height exactly the height of the browser window.
它的工作原理是基于以下观察：当页面小于浏览器窗口的完整高度时，document.body.scrollHeight 等于 document.body.clientHeight。while 循环增加高度，footerspacerdiv直到 document.body.scrollHeight 大于 document.body.clientHeight。此时，footerspacerdiv实际上会高出 1 个像素，并且浏览器会显示一个垂直滚动条。因此，脚本的最后一行将 的高度减少了footerspacerdiv一个像素，使页面高度与浏览器窗口的高度完全一致。
By placing footerspacerdivjust above the 'footer' of the page, this script can be used to 'push the footer down' to the bottom of the page, so that on short pages, the footer is flush with the bottom of the browser window.
通过放置footerspacerdiv在页面的“页脚”正上方，此脚本可用于“将页脚向下推”到页面底部，以便在短页面上，页脚与浏览器窗口的底部齐平。
<script>
//expand footerspacer div so that footer goes to bottom of page on short pages
var objSpacerDiv=document.getElementById('footerspacer');
var bresize=0;
while(document.body.scrollHeight<=document.body.clientHeight) {
objSpacerDiv.style.height=(objSpacerDiv.clientHeight+1)+"px";
bresize=1;
}
if(bresize) { objSpacerDiv.style.height=(objSpacerDiv.clientHeight-1)+"px"; }
</script>
回答by Chris Middleton
Here's a solution that doesn't use negative margins or calc. Run the snippet below to see the final result.
这是一个不使用负边距或calc. 运行下面的代码片段以查看最终结果。
Explanation
解释
We give the header and the footer a fixed height of 30pxand position them absolutely at the top and bottom, respectively. To prevent the content from falling underneath, we use two classes: below-headerand above-footerto pad the div above and below with 30px.
我们给页眉和页脚一个固定的高度，30px并将它们分别绝对地定位在顶部和底部。为了防止内容掉在下面，我们使用了两个类：below-header和above-footer用30px.
All of the content is wrapped in a position: relativediv so that the header and footer are at the top/bottom of the contentand not the window.
所有的内容被包裹在一个position: relative使得页眉和页脚是在的顶部/底部的div内容，而不是窗口。
We use the classes fit-to-parentand min-fit-to-parentto make the content fill out the page. This gives us a sticky footer which is at least as low as the window, but hidden if the content is longer than the window.
我们使用的类fit-to-parent和min-fit-to-parent使内容填写页面。这为我们提供了一个至少与窗口一样低的粘性页脚，但如果内容长于窗口则隐藏。
Inside the header and footer, we use the display: tableand display: table-cellstyles to give the header and footer some vertical padding without disrupting the shrink-wrap quality of the page. (Giving them real padding can cause the total height of the page to be more than 100%, which causes a scroll bar to appear when it isn't really needed.)
在页眉和页脚内部，我们使用display: table和display: table-cell样式为页眉和页脚提供一些垂直填充，而不会破坏页面的收缩包装质量。（给他们真正的填充会导致页面的总高度超过100%，这会导致滚动条在不需要时出现。）
.fit-parent {
height: 100%;
margin: 0;
padding: 0;
}
.min-fit-parent {
min-height: 100%;
margin: 0;
padding: 0;
}
.below-header {
padding-top: 30px;
}
.above-footer {
padding-bottom: 30px;
}
.header {
position: absolute;
top: 0;
height: 30px;
width: 100%;
}
.footer {
position: absolute;
bottom: 0;
height: 30px;
width: 100%;
}
/* helper classes */
.padding-lr-small {
padding: 0 5px;
}
.relative {
position: relative;
}
.auto-scroll {
overflow: auto;
}
/* these two classes work together to create vertical centering */
.valign-outer {
display: table;
}
.valign-inner {
display: table-cell;
vertical-align: middle;
}<html class='fit-parent'>
<body class='fit-parent'>
<div class='min-fit-parent auto-scroll relative' style='background-color: lightblue'>
<div class='header valign-outer' style='background-color: black; color: white;'>
<div class='valign-inner padding-lr-small'>
My webpage
</div>
</div>
<div class='fit-parent above-footer below-header'>
<div class='fit-parent' id='main-inner'>
Lorem ipsum doloris finding dory Lorem ipsum doloris finding
dory Lorem ipsum doloris finding dory Lorem ipsum doloris
finding dory Lorem ipsum doloris finding dory Lorem ipsum
doloris finding dory Lorem ipsum doloris finding dory Lorem
ipsum doloris finding dory Lorem ipsum doloris finding dory
Lorem ipsum doloris finding dory Lorem ipsum doloris finding
dory Lorem ipsum doloris finding dory Lorem ipsum doloris
finding dory Lorem ipsum doloris finding dory Lorem ipsum
doloris finding dory Lorem ipsum doloris finding dory Lorem
ipsum doloris finding dory Lorem ipsum doloris finding dory
Lorem ipsum doloris finding dory Lorem ipsum doloris finding
dory Lorem ipsum doloris finding dory Lorem ipsum doloris
finding dory Lorem ipsum doloris finding dory Lorem ipsum
doloris finding dory Lorem ipsum doloris finding dory Lorem
ipsum doloris finding dory Lorem ipsum doloris finding dory
Lorem ipsum doloris finding dory Lorem ipsum doloris finding
dory Lorem ipsum doloris finding dory Lorem ipsum doloris
finding dory Lorem ipsum doloris finding dory Lorem ipsum
doloris finding dory Lorem ipsum doloris finding dory Lorem
ipsum doloris finding dory Lorem ipsum doloris finding dory
Lorem ipsum doloris finding dory Lorem ipsum doloris finding
dory Lorem ipsum doloris finding dory Lorem ipsum doloris
finding dory Lorem ipsum doloris finding dory Lorem ipsum
doloris finding dory Lorem ipsum doloris finding dory Lorem
ipsum doloris finding dory Lorem ipsum doloris finding dory
Lorem ipsum doloris finding dory Lorem ipsum doloris finding
dory Lorem ipsum doloris finding dory Lorem ipsum doloris
finding dory Lorem ipsum doloris finding dory Lorem ipsum
doloris finding dory Lorem ipsum doloris finding dory Lorem
ipsum doloris finding dory Lorem ipsum doloris finding dory
Lorem ipsum doloris finding dory Lorem ipsum doloris finding
dory Lorem ipsum doloris finding dory Lorem ipsum doloris
finding dory Lorem ipsum doloris finding dory Lorem ipsum
doloris finding dory Lorem ipsum doloris finding dory Lorem
ipsum doloris finding dory Lorem ipsum doloris finding dory
</div>
</div>
<div class='footer valign-outer' style='background-color: white'>
<div class='valign-inner padding-lr-small'>
© 2005 Old Web Design
</div>
</div>
</div>
</body>
</html>