现在的位置: 首页 > web前端 > 正文

CSS布局:让页底内容永远固定在底部

2020年02月12日 web前端 ⁄ 共 827字 ⁄ 字号 评论关闭

我们在设计一些页面内容甚少的网页时(典型应用就是登陆页面),由于显示器的分辨率大,在正常情况下,假如页面内容高度小于浏览器高度时,页面底部以下会留下很大的空间...

先看示例:http://www.xuebuyuan.com/demo/cssfooter/demo1.html

不管浏览器的高度怎么变化,我们要想让页底内容始终固定在底部,最终效果如:http://www.xuebuyuan.com/demo/cssfooter/demo2.html

本文提供了一个CSS解决方案。


XHTML

<p id="wrap"> <p id="main"> 主体 </p> </p> <p id="footer"> 这里是页底footer内容 </p>


CSS

<style type="text/css"> * {margin:0;padding:0;} html, body {height: 100%;} #wrap {min-height: 100%;} #main {overflow:auto; padding-bottom: 60px;} /* 必须使用和footer相同的高度 */ #footer {position: relative; margin-top: -60px; height: 60px; clear:both; background:#369} /*Opera Fix*/ body:before { content:""; height:100%; float:left; width:0; margin-top:-32767px; } </style>

注意,以上代码在IE6上根本不起作用,必须使用以下代码来解决IE6下的BUG。

<!--[if !IE 7]> <style type="text/css"> #wrap {display:table;height:100%} </style> <![endif]-->

以上就上有关CSS布局:让页底内容永远固定在底部的全部内容,学步园全面介绍编程技术、操作系统、数据库、web前端技术等内容。

抱歉!评论已关闭.