CSS方法实现DIV固定网页底部
创始人
2024-07-13 13:21:52
0

本文向大家描述一下如何使用CSS方式实现DIV固定在网页底部,这个问题如果在以前使用表格布局,并不困难,只要给页面的最外层表格高度设置为100%就可以了,然而,在Web标准的规范中,表格的高度已经属于废止的属性,应该避免使用,所以使用CSS方法才是明智的选择。

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

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

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

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

基本思路

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

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

代码实现

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

Html程序代码

  1.  
  2.  
  3.  
  4. Content

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

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

     
 
  •  
  • Footer

     
  •  
  •  
  •  
  •  
  • CSS代码:

    程序代码 

    1. body,html{  
    2.   margin:0;  
    3.   padding:0;  
    4.   font:12px/1.5arial;  
    5.   height:100%;  
    6.  }  
    7.  #container{  
    8.   min-height:100%;  
    9.   position:relative;  
    10.  }  
    11.  #content{  
    12.   padding:10px;  
    13.   padding-bottom:60px;  
    14.   /*20px(font-size)
    15. x2(line-height)+10px(padding)x2=60px*/  
    16.  }  
    17.  #footer{  
    18.   position:absolute;  
    19.   bottom:0;  
    20.   padding:10px0;  
    21.   background-color:#AAA;  
    22.   width:100%;  
    23.  }  
    24.  #footerh1{  
    25.   font:20px/2Arial;  
    26.   margin:0;  
    27.   padding:010px;  
    28.  }  

    【编辑推荐】

    1. CSS绝对定位和相对定位的区别
    2. CSS中DIV标签实现定位单元的控制
    3. CSS中border和clear两大属性用法揭秘
    4. 实现DIV居中布局三种途径
    5. 解读DIV CSS网页布局中CSS无效十个原因

     

     

    相关内容

    热门资讯

    如何允许远程连接到MySQL数... [[277004]]【51CTO.com快译】默认情况下,MySQL服务器仅侦听来自localhos...
    如何利用交换机和端口设置来管理... 在网络管理中,总是有些人让管理员头疼。下面我们就将介绍一下一个网管员利用交换机以及端口设置等来进行D...
    施耐德电气数据中心整体解决方案... 近日,全球能效管理专家施耐德电气正式启动大型体验活动“能效中国行——2012卡车巡展”,作为该活动的...
    Windows恶意软件20年“... 在Windows的早期年代,病毒游走于系统之间,偶尔删除文件(但被删除的文件几乎都是可恢复的),并弹...
    20个非常棒的扁平设计免费资源 Apple设备的平面图标PSD免费平板UI 平板UI套件24平图标Freen平板UI套件PSD径向平...
    规避非法攻击 用好路由器远程管... 单位在市区不同位置设立了科技服务点,每一个服务点的员工都通过宽带路由器进行共享上网,和单位网络保持联...
    范例解读VB.NET获取环境变... VB.NET编程语言的使用范围非常广泛,可以帮助开发人员处理各种程序中的需求,而且还能对移动设备进行...
    德国电信门户网站可实时显示全球... 德国电信周三推出一个门户网站,直观地实时提供其安装在全球各地的传感器网络检测到的网络攻击状况。该网站...