现代方式在HTML5和CSS3中标记100％高度布局 [英] Modern way to markup 100% height layout in HTML5 and CSS3
问题描述
我已经远离标记网站一段时间。所以，现在我们有HTML5和CSS中的很多新功能。我有一个常见的网站布局，具有固定大小的页眉和页脚。当然主要内容区域在之间。默认页面应该占用100％的窗口高度（即内容区域扩展）。如果内容是长页面垂直滚动条出现和所有像平常。
通常我用这样的东西：
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:
<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>
并附随css：
html, body { height:100% }
table#main { height:100% }
td#footer { height:123px }
所以，它已经过时了。你，谁跟上新的标记技术，如何做到现在在2011年？
So, it's obsolete. You, who keeps abreast of new markup techniques, how it is done by now in 2011?
UPD 人，不会涉及语义标记或使用div。我知道它是什么意思。现在问题 - 如何告诉页脚留在底部，即使内容是空或短。当内容足够长时，页脚只会下降，因为它会在其他情况下。绝对和固定不是解决方案（至少在其基本形式）
UPD People, 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)
$ b
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 Page was adviced by Andrej. It works also: little content, more content
我觉得有些失望：第一种方法只是这些表，但没有 table 标记。第二个是真的老，我已经避免使用它，因为它类似于黑客。 ）
Some disappointment though I feel: first method is just those tables but without table tag. The second is really old, I've avoided to use it because it resembles hack. My god, nothing new :)
推荐答案
好吧，首先在2011年，我们不再使用表格布局了！
Well, first of all in 2011 we dont use tables for layout anymore!
如果我是你，我会这样写标记：
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>
除了更改的选择器，CSS将是相同的
And the CSS would be the same except the changed selectors
html, body { height:100% }
#main { height:100% }
footer { height:123px }
对于固定页脚，我建议使用 position：absolute 或者 position：fixed - 它取决于您的行为方式（与页面一起滚动或始终保持在底部）。
For a fixed footer, I would suggest to use position:absolute or maybe position:fixed - it depends how you want it to behave (scroll with page or always stay at bottom).
要制作一个粘性页脚，它将位于页面底部，但随内容一起移动，此方法会做的伎俩。
To make a "sticky" footer, that will be at the bottom of the page but move with the content, this method will do the trick.
这篇关于现代方式在HTML5和CSS3中标记100％高度布局的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！
