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

发布时间:2021-08-09 10:00:36 作者:chen
来源:亿速云 阅读:135

这篇文章主要介绍“CSS布局怎么让页底内容永远固定在底部”,在日常操作中,相信很多人在CSS布局怎么让页底内容永远固定在底部问题上存在疑惑,小编查阅了各式资料,整理出简单好用的操作方法,希望对大家解答”CSS布局怎么让页底内容永远固定在底部”的疑惑有所帮助!接下来,请跟着小编一起来学习吧!

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

先看示例: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布局怎么让页底内容永远固定在底部”的学习就结束了,希望能够解决大家的疑惑。理论与实践的搭配能更好的帮助大家学习,快去试试吧!若想继续学习更多相关知识,请继续关注亿速云网站,小编会继续努力为大家带来更多实用的文章!

推荐阅读:
  1. bootstrap-导航条固定在底部
  2. css始终将footer固定在底部的方法

免责声明:本站发布的内容(图片、视频和文字)以原创、转载和分享为主,文章观点不代表本网站立场,如果涉及侵权请联系站长邮箱:is@yisu.com进行举报,并提供相关证据,一经查实,将立刻删除涉嫌侵权内容。

css

上一篇:HTML5自定义属性前缀data-及dataset怎么用

下一篇:Yii2.0乐观锁与悲观锁怎么用

相关阅读

您好,登录后才能下订单哦!

密码登录
登录注册
其他方式登录
点击 登录注册 即表示同意《亿速云用户服务条款》