我已经远离标记网站一段时间了。所以现在我们在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
有些失望,虽然我觉得:第一种方法只是那些表,但没有表标记。第二个是老的,我避免使用它,因为它类似于黑客。我的上帝,没有什么新的:)
@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将会做到这一点。