HTML5中footer标签的用法你知道吗?,HTML5中的footer标签是什么意思?


当前第2页 返回上一页

XML/HTML Code复制内容到剪贴板

1

2

3

4

5

6

7

8

9

<!-- 父层 -->    

<div id="wapper">    

    <!-- 主要内容 -->    

    <div id="main-content">    

    </div>    

    <!-- 页脚 -->    

    <div id="footer">    

    </div>    

</div>

CSS如下:

CSS Code复制内容到剪贴板

1

2

3

4

5

6

7

8

9

10

11

12

13

#wapper{    

    position: relative;   /*重要!保证footer是相对于wapper位置绝对*/    

    height: auto;          /* 保证页面能撑开浏览器高度时显示正常*/    

    min-height: 100%  /* IE6不支持,IE6要单独配置*/    

}    

#footer{    

   position: absolute;  bottombottom: 0; /* 关键 */    

   left:0; /* IE下一定要记得 */    

   height: 60px;         /* footer的高度一定要是固定值*/    

}    

#main-content{    

   padding-bottom: 60px; /*重要!给footer预留的空间*/    

}

这时候,其它浏览器上都能正常显示了,但是IE 6要另外处理:

CSS Code复制内容到剪贴板

1

2

3

4

5

<!--[if IE 6]->    

<style>    

#wapper{height:100%;} /* IE在高度不够时会自动撑开层*/    

</style>    

<![endif]-->

好了,本篇文章就和大家说这么多。关于页头的文章也会发布,希望大家点进去看看。

【相关推荐】

HTML IMG标签的属性是有哪些?了解IMG标签的用法

HTML5中web是什么?web存储中的元素有哪些?

以上就是HTML5中footer标签的用法你知道吗?,HTML5中的footer标签是什么意思?的详细内容,更多文章请关注木庄网络博客

返回前面的内容

相关阅读 >>

HTML5中footer标签的用法你知道吗?,html5中的footer标签是什么意思?

更多相关阅读请进入《HTML5中footer标签》频道 >>




打赏

取消

感谢您的支持,我会继续努力的!

扫码支持
扫码打赏,您说多少就多少

打开支付宝扫一扫,即可进行扫码打赏哦

分享从这里开始,精彩与您同在

评论

管理员已关闭评论功能...