怎么用CSS方法实现DIV固定网页底部

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

创新互联-专业网站定制、快速模板网站建设、高性价比长汀网站开发、企业建站全套包干低至880元,成熟完善的模板库,直接使用。一站式长汀网站制作公司更省心,省钱,快速模板网站建设找我们,业务覆盖长汀地区。费用合理售后完善,10余年实体公司更值得信赖。

DIV固定在网页底部的CSS方法

首先看这样一下问题:“如果有一个footer层,我想让他固定出现在整个页面的最下方,不随着页面中的内容而变化,CSS中要怎样设?比如里面是一些版权信息。因为我整页的内容比较少,footer老跟着内容跑到上面去,很不美观。”

这个问题如果在以前使用表格布局,并不困难,只要给页面的最外层表格高度设置为100%就可以了,然而,在Web标准的规范中,表格的高度已经属于废止的属性,应该避免使用,而且使用Web标准以后,也不在提倡使用表格布局了,那么是否有办法使用CSS来实现页面的页脚部分固定在浏览器底端呢?

下面就来讲解DIV固定在网页底部的实现方法。

基本思路

首先考虑外层设置一个容器DIV,id设为#container,使他的高度为浏览器窗口的高度,然后将#footer这个DIV设置为#container的子DIV,并使用绝对定位的方式,使他固定到#container的底端,以实现希望的把DIV固定在网页底部效果。

改变浏览器的高度和宽度,可以看到Footer部分的效果。

代码实现

下面先考虑HTML结构,这个演示页面的HTML代码非常简单。

Html程序代码

   

Content

 

请改变浏览器窗口的高度,以观察footer效果。

 

这里是示例文字,DIV固定………,这里是示例文字。

 
  

Footer

 
 
 

CSS代码:

程序代码

body,html{    margin:0;    padding:0;    font:12px/1.5arial;    height:100%;   }   #container{    min-height:100%;    position:relative;   }   #content{    padding:10px;    padding-bottom:60px;    /*20px(font-size)x2(line-height)+10px(padding)x2=60px*/   }   #footer{    position:absolute;    bottom:0;    padding:10px0;    background-color:#AAA;    width:100%;   }   #footerh2{    font:20px/2Arial;    margin:0;    padding:010px;   }

到此,关于“怎么用CSS方法实现DIV固定网页底部”的学习就结束了,希望能够解决大家的疑惑。理论与实践的搭配能更好的帮助大家学习,快去试试吧!若想继续学习更多相关知识,请继续关注创新互联网站,小编会继续努力为大家带来更多实用的文章!


分享标题:怎么用CSS方法实现DIV固定网页底部
标题路径:http://csdahua.cn/article/pjpdcs.html
扫二维码与项目经理沟通

我们在微信上24小时期待你的声音

解答本文疑问/技术咨询/运营咨询/技术建议/互联网交流

其他资讯