Question

我已经离开了标记网站一段时间了。所以，现在我们有了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的问题。我知道它的意思。现在问题 - 即使内容为空或短，我如何告诉页脚保持在底部。当内容足够长时，只需像其他情况那样下去。绝对和固定不是解决方案（至少在其基本形式）

某些摘要更新

我尝试过使用display：table和display：table-row的方法，它有效：little content，more content
方法Make the Footer Stick to the Bottom of a Page由Andrej提供建议。它还有效：little content，more content

虽然我觉得有点失望：第一种方法只是那些表但没有table标签。第二个真的很旧，我已经避免使用它，因为它类似于黑客。我的上帝，没有什么新鲜事：）

Answer 1

好吧，首先在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 - 这取决于您希望它的行为方式（滚动页面或始终保持在底部）。

要制作一个“粘性”页脚，它将位于页面底部，但随内容一起移动，this method就可以了。

Answer 2

2013年，仍然没有什么比分别拥有thead / tfoot / tbody的体面表更胜一筹。

以下（有效的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>

Answer 3

正如你要求＆＃34;现代＆＃34; ... anno 2016我可能比2013年有更好的答案：

在CSS3中使用100vh解决方案。 vh是一个新单位，代表ViewPort高度。

＆＃13;

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 }

＆＃13;

<!DOCTYPE html>
<meta charset="utf-8" />
<title>test</title>
<header>bla</header>
<main>bla</main>
<footer>bla</footer>

＆＃13;

但是如果您希望与旧浏览器兼容，请使用我2013年答案中的代码。

Answer 4

今天，你会这样做（真的没那么不同）

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>

Answer 5

从技术上讲，你可能仍然可以通过使用表格标记布置你的页面，但现在它被认为是不好的做法。使用＆＃34;语义＆＃34;被认为是一种好习惯。 web标记，这意味着将标记用于其预期目的，因此应使用表标记来表示表数据而不是不可见的设计。 DIV旨在用于设计不可见的页面布局。列表是一个很好的网站资源，用于理解这些概念。

本文有助于理解语义标记：http://www.alistapart.com/articles/12lessonsCSSandstandards

所有这一切都说，这是一个做你想做的样本页面：

http://peterned.home.xs4all.nl/examples/csslayout1.html

Answer 6

因为要求“现代”和“兼容”无论如何都是收缩，到目前为止还没有提到网格方法，现在可能太现代了，但有些适应可能是一种解决方案。

这篇文章（和指针） - 使用更复杂 - 非常适合阅读： 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>

Answer 7

让我通过在标题/主/页脚布局中添加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>

Answer 8

到目前为止，没有人提到过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>

在HTML5和CSS3中标记100％高度布局的现代方法

8 个答案: