我已经有一段时间没有标记网站了。所以，现在我们有了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>
和相应的css:
html, body { height:100% }
table#main { height:100% }
td#footer { height:123px }
所以，它过时了。您一直在关注新的标记技术，那么到2011年它是如何实现的呢?
UPD人，问题不是关于语义标记或使用div。我知道这是什么意思。问题现在在-我如何告诉页脚留在底部，即使内容是空的或短的。当内容足够长时，页脚就像在其他情况下一样往下移。绝对和固定不是解决方案(至少在其基本形式)
SOME SUMMARY UPDATE
- 我已经尝试使用display:table和display:table-row的方法，它的工作原理:少的内容，更多的内容
- 方法使页脚粘在页面底部是由Andrej建议的。它也适用于:内容少，内容多
有些失望，虽然我觉得:第一个方法只是那些表，但没有table标签。第二个很老了，我一直避免使用它，因为它像黑客。天啊，没什么新鲜的
首先，在2011年我们不再使用表格进行布局了!
如果我是你，我会这样写标记:
<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是一样的除了选择符
html, body { height:100% }
#main { height:100% }
footer { height:123px }
对于固定页脚，我建议使用position:absolute或position:fixed -这取决于你想要它如何表现(滚动页面或始终留在底部)。
要创建一个"粘性"页脚，它将位于页面底部，但会随着内容移动，这个方法将会奏效。
在2013年，仍然没有什么比一个体面的桌子，分别有头/脚/身。
下面(有效的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>
正如你所要求的"modern"…2016年我可能有一个比2013年更好的答案:
在CSS3中使用100vh溶液。vh是一个新的单位，代表ViewPort高度。
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>但是如果你希望与旧浏览器兼容，请使用我2013年回答中的代码
今天，您会这样做(实际上没有太大不同)
http://jsfiddle.net/5YHX7/3/html, body { height: 100%; width: 100%; margin: 0; }
div { height: 100%; width: 100%; background: #F52887; }
和
<html><body><div></div></body></html>
从技术上讲，您可能仍然可以使用表格标签来布局您的页面，但现在它被认为是不好的做法。使用"语义"web标记被认为是一种很好的做法，这意味着使用标签来达到预期的目的，所以表标签应该用来表示表数据，而不是隐形的设计。div是用来设计不可见页面布局的。list apart是一个很好的网站资源，可以帮助你理解这些概念。
本文有助于理解语义标记:http://www.alistapart.com/articles/12lessonsCSSandstandards
说了这么多，这是一个你想要的示例页面:
http://peterned.home.xs4all.nl/examples/csslayout1.html无论如何要求"现代"one_answers"兼容"是一个收缩，到目前为止还没有提到网格方法，可能现在太现代了，但经过一些调整可能是一个解决方案。
这篇文章(和指针)——有更复杂的用法——读起来很棒:https://developers.google.com/web/updates/2017/01/css-grid
现在代码看起来不错，但是浏览器不…-所以我添加了一些强迫。
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>
让我在你的页眉/主页/页脚布局中添加3列来添加我的贡献:
http://jsfiddle.net/ESrG9/<!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>
到目前为止还没有人提到flex-box方法
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>