在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

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

解决方法

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

版权声明:本文内容由互联网用户自发贡献,该文观点与技术仅代表作者本人。本站仅提供信息存储空间服务,不拥有所有权,不承担相关法律责任。如发现本站有涉嫌侵权/违法违规的内容, 请发送邮件至 dio@foxmail.com 举报,一经查实,本站将立刻删除。

相关推荐


HTML5和CSS3实现3D展示商品信息的代码
利用HTML5中的Canvas绘制笑脸的代码
Html5剪切板功能的实现
如何通过HTML5触摸事件实现移动端简易进度条
Html5移动端获奖无缝滚动动画实现
关于HTML5和CSS3实现机器猫的代码
HTML5使用DOM进行自定义控制
使用HTML5 Canvas绘制阴影效果的方法
使用PHP和HTML5 FormData实现无刷新文件上传
如何解决HTML5 虚拟键盘出现挡住输入框的问题
HTML5中div和section以及article的区别分析
html5和CSS 实现禁止IOS长按复制粘贴功能
html5 touch事件实现触屏页面上下滑动
canvas 模拟实现电子彩票刮刮乐的代码
HTML5 Plus 实现手机APP拍照或相册选择图片上传的功能
Android自定义环形LoadingView效果
HTML5 canvas绘制五角星的方法
html5使用html2canvas实现浏览器截图
使用Canvas处理图片的方法介绍
利用Canvas模仿百度贴吧客户端loading小球的方法