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

前端之家收集整理的这篇文章主要介绍了在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 contentmore content
>方法Make the Footer Stick to the Bottom of a Page由Andrej提醒。它也工作:little contentmore content

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

@R_301_323@

那么,首先在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将会做到这一点。

原文链接:https://www.f2er.com/html5/169149.html

猜你在找的HTML5相关文章