Html CSS - 100% 减去 #px 的高度 - 页眉和页脚
声明：本页面是StackOverFlow热门问题的中英对照翻译，遵循CC BY-SA 4.0协议，如果您需要使用它，必须同样遵循CC BY-SA许可，注明原文地址和作者信息，同时你必须将它归于原作者（不是我）：StackOverFlow
原文地址: http://stackoverflow.com/questions/4587582/
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 - Height of 100% minus #px - Header and Footer
提问by JCOC611
The webpage in question looks like this:
有问题的网页如下所示：
// The Header //
/* */
/* CONTENT */
/* */
// The footer //
Both the header and the footer have fixed heights. Lets say for example that both have a height of 20px. I need to set the content's height to 100% minus 40px (header + footer heights). I know I can do this easily with JavaScript, but it would be cool to learn how to do it with plain CSS, if it's possible.
页眉和页脚都有固定的高度。例如，假设两者的高度都是 20px。我需要将内容的高度设置为 100% 减去 40px（页眉 + 页脚高度）。我知道我可以用 JavaScript 轻松地做到这一点，但如果可能的话，学习如何用纯 CSS 来做到这一点会很酷。
采纳答案by Ismael
#header /* hypothetical name */
{
height:100%;
}
#header p /* or any other tag */
{
margin:20px 0 20px 0;
}
Just make sure to not place margin and height in the same tag. You will experience some crazy results.
只要确保不要将边距和高度放在同一个标签中。你会经历一些疯狂的结果。
回答by Jim Clouse
If your browser supports CSS3, try using the CSS element Calc()
如果您的浏览器支持 CSS3，请尝试使用 CSS 元素 Calc()
height: calc(100% - 65px);
you might also want to adding browser compatibility options:
您可能还想添加浏览器兼容性选项：
height: -o-calc(100% - 65px); /* opera */
height: -webkit-calc(100% - 65px); /* google, safari */
height: -moz-calc(100% - 65px); /* firefox */
回答by Michael Irigoyen
Place a fixed position on the header and the footer and set them to stick to the top of bottom of the window, respectively. Then place a top and bottom padding on the content area of 20px.
在页眉和页脚上放置一个固定位置，并将它们分别设置为贴在窗口底部的顶部。然后在 20px 的内容区域上放置顶部和底部填充。
#header{position:fixed;top:0}
#footer{position:fixed;bottom:0}
#content{padding:20px 0}
回答by Karig
Marnix's answer involves using the top and bottom padding of the content element; mine involves using the top and bottom border.
Marnix 的回答涉及使用内容元素的顶部和底部填充；我的涉及使用顶部和底部边框。
I stumbled onto this solution on my own while trying to figure out how to do something similar withoutresorting to tables: make the central element's height 100%, but then set the box-sizing model to "border-box" (so that the height includes not only the content within the box but also the borders around the box), make the top and bottom borders really thick (like, say, 20px), then use fixed positioning to overlay the header and footer over the crazy-thick top and bottom borders of the central element.
我自己偶然发现了这个解决方案，同时试图弄清楚如何在不求助于表格的情况下做类似的事情：使中心元素的高度为 100%，然后将框大小模型设置为“边框框”（以便高度不仅包括框内的内容，还包括框周围的边框），使顶部和底部边框非常厚（例如，20px），然后使用固定定位将页眉和页脚覆盖在疯狂厚的顶部和中心元素的底部边框。
Here is my sample CSS:
这是我的示例 CSS：
html, body {
height: 100%;
margin: 0;
padding: 0;
}
#content {
height: 100%;
-moz-box-sizing: border-box;
box-sizing: border-box;
/* Ensure that the height of the element includes the
box border, not just the content */
border: 0;
border-top: 20px solid white;
border-bottom: 20px solid white;
/* Leave some space for the header and footer to
overlay. */
}
#header,
#footer {
position: fixed;
left: 0;
right: 0;
height: 20px;
background-color: #eee;
/* Specify a background color so the content text doesn't
bleed through the footer! */
}
#header {
top: 0;
}
#footer {
bottom: 0;
}
This works in Google Chrome 24 for Mac. I haven't tried it in other browsers, though.
这适用于 Mac 版 Google Chrome 24。不过，我还没有在其他浏览器中尝试过。
Hopefully this will help somebody else who is still facing the temptation to just use a table and get the page layout done already. :-)
希望这能帮助那些仍然面临着只使用表格并完成页面布局的诱惑的其他人。:-)
回答by Marnix
This example seems to show the most robust way to do this. Actually, it is a bit buggy in IE, because resizing goes wrong sometimes. Namely, when doing a resize from out of the lower right corner and just do a vertical resize by hand (quite hard to do sometimes), the page will not refresh in IE. I had the same problem with this and just fixed it with JS after all, because of other events on my web page.
这个例子似乎展示了最健壮的方法来做到这一点。实际上，它在 IE 中有点问题，因为有时调整大小会出错。即，当从右下角调整大小并手动调整垂直大小时（有时很难做到），页面将不会在 IE 中刷新。我遇到了同样的问题，毕竟只是用 JS 修复了它，因为我的网页上有其他事件。
