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

开发 前端
DIV CSS技术是网页布局中的主流技术,那么你知道如何把DIV固定在网页底部吗,使用CSS方法就可以轻松解决这一问题,这里向大家详细描述一下。

本文向大家描述一下如何使用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. <body> 
  2. <DIVidDIVid="container"> 
  3. <DIVidDIVid="content"> 
  4. <h1>Content</h1> 
  5. <p>请改变浏览器窗口的高度,以观察footer效果。</p> 
  6. <p>这里是示例文字,DIV固定………,这里是示例文字。</p> 
  7. </DIV> 
  8. <DIVidDIVid="footer"> 
  9. <h1>Footer</h1> 
  10. </DIV> 
  11. </DIV> 
  12. </body> 
  13.  

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无效十个原因

 

 

责任编辑:佚名 来源: xlnv.net
相关推荐

2010-09-09 13:12:54

CSSfloatDIV

2010-09-03 13:51:59

DIVCSS

2010-09-13 13:56:52

CSSDIV背景

2010-08-24 11:34:37

DIV+CSS

2010-09-09 10:56:56

CSS

2010-08-17 11:12:18

DIV CSS

2010-08-16 13:17:47

DIV+CSS

2010-08-24 12:33:57

DIVCSS

2010-08-24 15:31:51

DIVCSS

2010-09-02 09:32:09

DIV CSS

2010-08-23 13:59:32

DIV CSSmarginpadding

2010-08-17 13:28:31

DIVCSS

2010-09-03 15:40:42

最小高度DIVCSS

2010-09-06 15:46:08

CSSDIV

2010-09-02 13:03:38

CSS垂直居中

2010-09-14 10:55:14

DIV CSS网页制作

2010-08-24 15:45:48

DIVCSSfloat

2010-08-16 14:18:49

DIV+CSS

2010-08-23 09:59:16

DIV+CSSSEO

2010-08-27 13:46:58

DIV+CSS
点赞
收藏

51CTO技术栈公众号