Html 在 HTML5 和 CSS3 中标记 100% 高度布局的现代方法
声明：本页面是StackOverFlow热门问题的中英对照翻译，遵循CC BY-SA 4.0协议，如果您需要使用它，必须同样遵循CC BY-SA许可，注明原文地址和作者信息，同时你必须将它归于原作者（不是我）：StackOverFlow
原文地址: http://stackoverflow.com/questions/8257311/
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
Modern way to markup 100% height layout in HTML5 and CSS3
提问by dmitry
I've been away from marking up sites for some time. So, now we have HTML5 and a lot of new features in CSS. I have a common site layout with fixed size header and footer. And of course main content area in between. By default page should take 100% of window height (i.e. content area expands). And if content is long page vertical scrollbar appears and all like usual. Usually I used to do it by something like this:
我已经有一段时间没有标记网站了。所以，现在我们有了 HTML5 和 CSS 中的许多新功能。我有一个带有固定大小的页眉和页脚的通用站点布局。当然，主要内容区域介于两者之间。默认页面应该占据窗口高度的 100%（即内容区域扩展）。如果内容很长，页面垂直滚动条就会出现，一切都像往常一样。通常我曾经通过这样的方式来做到这一点：
<body>
<table id="main" ...>
<tr>
<td id="header-and-content">
<div id="header">contains logo, nav and has fixed height</div>
<div id="content">actual content</div>
</td>
</tr>
<tr>
<td id="footer">
fixed size footer
</td>
</tr>
</table>
</body>
And accompanying css:
并附带css：
html, body { height:100% }
table#main { height:100% }
td#footer { height:123px }
So, it's obsolete. You, who keeps abreast of new markup techniques, how it is done by now in 2011?
所以，它已经过时了。紧跟新标记技术的您，在 2011 年如何做到这一点？
UPDPeople, issue not about semantic markup or using divs. I know what it does mean. Issue now in - how do I tell footer to stay at bottom even while content is empty or short. When content is long enough footer just go down as it would do in other case. Absolute and fixed is not the solution (at least at its basic form)
UPD人，问题不是关于语义标记或使用 div。我知道这意味着什么。现在发布 - 即使内容为空或短，我如何告诉页脚保持在底部。当内容足够长时，页脚就像在其他情况下一样向下。绝对和固定不是解决方案（至少在其基本形式上）
SOME SUMMARY UPDATE
一些摘要更新
- I've tried method with usage of display:table and display:table-row and it works: little content, more content
- Method Make the Footer Stick to the Bottom of a Pagewas adviced by Andrej. It works also: little content, more content
Some disappointment though I feel: first method is just those tables but without tabletag. The second is really old, I've avoided to use it because it resembles hack. My god, nothing new :)
虽然我感到有些失望：第一种方法只是那些表格，但没有table标签。第二个真的很旧，我避免使用它，因为它类似于 hack。我的天，没什么新鲜的:)
采纳答案by r0skar
Well, first of all in 2011 we dont use tables for layout anymore!
好吧，首先在 2011 年我们不再使用表格进行布局！
If I were you, I would write the markup like so:
如果我是你，我会像这样写标记：
<body>
<div id="main" role="main">
<header>
contains logo, nav and has fixed height
</header>
<div class="content"> /*use <article> or <section> if it is appropriate - if not sure what to use, use a div*/
actual content
</div>
<footer>
fixed size footer
</footer>
</div>
</body>
And the CSS would be the same except the changed selectors
除了更改的选择器之外，CSS 将是相同的
html, body { height:100% }
#main { height:100% }
footer { height:123px }
For a fixed footer, I would suggest to use position:absoluteor maybe position:fixed- it depends how you want it to behave (scroll with page or always stay at bottom).
对于固定页脚，我建议使用position:absolute或可能position:fixed- 这取决于您希望它的行为方式（滚动页面或始终停留在底部）。
To make a "sticky" footer, that will be at the bottom of the page but move with the content, this methodwill do the trick.
要制作“粘性”页脚，它将位于页面底部但随内容移动，此方法将起作用。
回答by Leo
In 2013 there is still nothing that beats a decent table that has respectively thead/tfoot/tbody.
在 2013 年，仍然没有什么能打败分别有 thead/tfoot/tbody 的像样的桌子。
The below (valid HTML5 page) is a fixed header and footer, 100% height and NOT ANY resize trouble.
下面（有效的 HTML5 页面）是一个固定的页眉和页脚，100% 高度，没有任何调整大小的问题。
<!DOCTYPE html>
<meta charset="utf-8" />
<title>valid HTML5 / fixed header and footer / nada CSS sizing trouble</title>
<style type="text/css">
html, body, table { height: 100% }
th { height: 80px }
#f { height: 40px }
table { width: 1000px }
html, body { margin: 0 }
table { margin: 0 auto }
td { text-align: left }
html, body { text-align: center } /* important for old browsers */
th { text-align: right }
html, body { background-color: rgb(148,0,211) }
#m { background-color: #f39 }
#m { -webkit-border-radius: 25px;
-khtml-border-radius: 25px;
-moz-border-radius: 25px;
-ms-border-radius: 25px;
-o-border-radius: 25px;
border-radius: 25px; }
</style>
<table>
<thead><tr><th> head</th></tr></thead>
<tfoot><tr><td id="f">foot</td></tr></tfoot>
<tbody><tr><td id="m">main</td></tr></tbody>
</table>
回答by Leo
As you asked for "modern"... anno 2016 I have maybe a better answer than in 2013:
当你问“现代”...... anno 2016 时，我的答案可能比 2013 年更好：
use the 100vh solution in CSS3. vh is a new unit and stands for ViewPort height.
使用 CSS3 中的 100vh 解决方案。vh 是一个新单位，代表视口高度。
html, body { height: 100% }
header { height: 100px }
footer { height: 50px }
main { height: calc(100vh - 150px); }
html, body { width: 100% }
header, main, footer { width: 1000px }
html, body { margin: 0 }
header, main, footer { margin: 0 auto }
html, body { padding: 0 }
html, body { text-align: center }
body { background-color: white }
header { background-color: yellow }
main { background-color: orange }
footer { background-color: red }<!DOCTYPE html>
<meta charset="utf-8" />
<title>test</title>
<header>bla</header>
<main>bla</main>
<footer>bla</footer>But if you wish to be compatible with old browsers, use the code in my 2013 answer.
但是，如果您希望与旧浏览器兼容，请使用我 2013 年回答中的代码。
回答by Ben L
Technically you could probably still get away with laying out your page with table tags but it is now considered bad practice. It is considered good practice to use "semantic" web markup which means using tags for their intended purposes so a table tag should be used to represent table data and not invisible design. DIVs are intended for use designing your invisible page layout. A list apart is a great website resource for understanding these concepts.
从技术上讲，您可能仍然可以使用表格标签来布置页面，但现在认为这是不好的做法。使用“语义”网络标记被认为是一种很好的做法，这意味着将标签用于其预期目的，因此应使用表格标签来表示表格数据而不是不可见的设计。DIV 旨在用于设计不可见的页面布局。一个列表是理解这些概念的一个很好的网站资源。
This article is good for understanding semantic markup: http://www.alistapart.com/articles/12lessonsCSSandstandards
这篇文章有助于理解语义标记：http: //www.alistapart.com/articles/12lessonsCSSandstandards
So all that said, here is a sample page that does what you want:
综上所述，这里有一个示例页面，可以满足您的需求：
回答by Jan Dragsbaek
Today, you would do like this (not much different really)
今天，你会这样做（实际上没有太大不同）
html, body { height: 100%; width: 100%; margin: 0; }
div { height: 100%; width: 100%; background: #F52887; }
and
和
<html><body><div></div></body></html>
回答by Leo
As asking for "modern" AND "compatible" is a contraction anyway, the grid method wasn't mentioned so far, and maybe is too modern right now, but with some adaptions might be a solution.
由于要求“现代”和“兼容”无论如何都是一种收缩，到目前为止还没有提到网格方法，而且现在可能太现代了，但进行一些调整可能是一个解决方案。
This article (and pointers) -with more complex use- is great to read: https://developers.google.com/web/updates/2017/01/css-grid
这篇文章（和指针） - 使用更复杂 - 非常适合阅读：https: //developers.google.com/web/updates/2017/01/css-grid
Now the code looks nice, however browsers don't... - so I added some forcing.
现在代码看起来不错，但是浏览器不... - 所以我添加了一些强制。
https://jsfiddle.net/qLcjg6L6/1/
https://jsfiddle.net/qLcjg6L6/1/
<!DOCTYPE html>
<html>
<head>
<style>
html, body {
height: 100%;
min-height: 100vh;
margin: 0;
padding: 0 }
body { display: grid;
grid-template-rows: minmax(auto, min-content) auto minmax(auto, min-content);
grid-template-columns: 100% }
header { background: red }
main { background: pink }
footer { background: purple }
/* as this code is yet far from well-supported, here's a brute force... */
header { height: 70px }
footer { height: 60px }
main { height: calc(100vh - 130px); }
/* 130px being the sum of header/footer - adapt to your desired size/unit */
</style>
</head>
<body>
<header>hdr</header>
<main>main</main>
<footer>foot</footer>
</body>
</html>
回答by Leo
So far nobody mentioned the flex-box method
到目前为止还没有人提到 flex-box 方法
https://jsfiddle.net/55r7n9or/
https://jsfiddle.net/55r7n9or/
<!DOCTYPE html>
<html>
<head>
<style>
html, body, div {
height: 100%;
margin: 0;
padding: 0 }
div { display: flex;
flex-direction: column }
main { flex: 1 }
header { background: red }
main { background: pink }
footer { background: purple }
</style>
</head>
<body>
<div>
<header>hdr</header>
<main>main</main>
<footer>foot</footer>
</div>
</body>
</html>
回答by Gazmend Hoxha
Let me add my contribution by adding 3 columns to your header / main / footer layout:
让我通过向页眉/主要/页脚布局添加 3 列来添加我的贡献：
<!DOCTYPE html>
<table>
<thead>
<tr id="header">
<th colspan="3">head</th>
</tr>
</thead>
<tbody>
<tr>
<td id="left">main</td>
<td id="main">main</td>
<td id="right">main</td>
</tr>
</tbody>
<tfoot>
<tr>
<td id="footer" colspan="3">foot</td>
</tr>
</tfoot>
</table>
