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

我已经远离标记网站一段时间了。所以现在我们在CSS中有HTML5和很多新功能。我有一个常见的网站布局与固定大小的页眉和页脚。当然主要内容区域之间。默认情况下，页面应该占据窗口高度的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

有些失望，虽然我觉得：第一种方法只是那些表，但没有表标记。第二个是老的，我避免使用它，因为它类似于黑客。我的上帝，没有什么新的:)

解决方法

那么，首先在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 }

对于固定的页脚，我建议使用位置：绝对或可能的位置：固定 – 这取决于您希望它的行为(滚动页面或始终保持在底部)。

要制作一个“粘性”页脚，那将在页面的底部，但随着内容的移动，this method将会做到这一点。

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

解决方法

猜你在找的HTML5相关文章