偷偷摘套内射激情视频,久久精品99国产国产精,中文字幕无线乱码人妻,中文在线中文a,性爽19p

CSS方法實現(xiàn)DIV固定網(wǎng)頁底部

開發(fā) 前端
DIV CSS技術(shù)是網(wǎng)頁布局中的主流技術(shù),那么你知道如何把DIV固定在網(wǎng)頁底部嗎,使用CSS方法就可以輕松解決這一問題,這里向大家詳細(xì)描述一下。

本文向大家描述一下如何使用CSS方式實現(xiàn)DIV固定在網(wǎng)頁底部,這個問題如果在以前使用表格布局,并不困難,只要給頁面的最外層表格高度設(shè)置為100%就可以了,然而,在Web標(biāo)準(zhǔn)的規(guī)范中,表格的高度已經(jīng)屬于廢止的屬性,應(yīng)該避免使用,所以使用CSS方法才是明智的選擇。

DIV固定在網(wǎng)頁底部的CSS方法

首先看這樣一下問題:“如果有一個footer層,我想讓他固定出現(xiàn)在整個頁面的最下方,不隨著頁面中的內(nèi)容而變化,CSS中要怎樣設(shè)?比如里面是一些版權(quán)信息。因為我整頁的內(nèi)容比較少,footer老跟著內(nèi)容跑到上面去,很不美觀。”

這個問題如果在以前使用表格布局,并不困難,只要給頁面的最外層表格高度設(shè)置為100%就可以了,然而,在Web標(biāo)準(zhǔn)的規(guī)范中,表格的高度已經(jīng)屬于廢止的屬性,應(yīng)該避免使用,而且使用Web標(biāo)準(zhǔn)以后,也不在提倡使用表格布局了,那么是否有辦法使用CSS來實現(xiàn)頁面的頁腳部分固定在瀏覽器底端呢?

下面就來講解DIV固定在網(wǎng)頁底部的實現(xiàn)方法。

基本思路

首先考慮外層設(shè)置一個容器DIV,id設(shè)為#container,使他的高度為瀏覽器窗口的高度,然后將#footer這個DIV設(shè)置為#container的子DIV,并使用絕對定位的方式,使他固定到#container的底端,以實現(xiàn)希望的把DIV固定在網(wǎng)頁底部效果。

改變?yōu)g覽器的高度和寬度,可以看到Footer部分的效果。

代碼實現(xiàn)

下面先考慮HTML結(jié)構(gòu),這個演示頁面的HTML代碼非常簡單。

Html程序代碼

  1. <body> 
  2. <DIVidDIVid="container"> 
  3. <DIVidDIVid="content"> 
  4. <h1>Content</h1> 
  5. <p>請改變?yōu)g覽器窗口的高度,以觀察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絕對定位和相對定位的區(qū)別
  2. CSS中DIV標(biāo)簽實現(xiàn)定位單元的控制
  3. CSS中border和clear兩大屬性用法揭秘
  4. 實現(xiàn)DIV居中布局三種途徑
  5. 解讀DIV CSS網(wǎng)頁布局中CSS無效十個原因

 

 

責(zé)任編輯:佚名 來源: xlnv.net
相關(guān)推薦

2010-09-09 13:12:54

CSSfloatDIV

2010-09-03 13:51:59

DIVCSS

2010-09-09 10:56:56

CSS

2010-09-13 13:56:52

CSSDIV背景

2010-08-24 11:34:37

DIV+CSS

2010-08-17 11:12:18

DIV CSS

2010-08-24 12:33:57

DIVCSS

2010-08-16 13:17:47

DIV+CSS

2010-08-24 15:31:51

DIVCSS

2010-09-02 09:32:09

DIV CSS

2010-08-23 13:59:32

DIV CSSmarginpadding

2010-09-03 15:40:42

最小高度DIVCSS

2010-08-17 13:28:31

DIVCSS

2010-09-14 10:55:14

DIV CSS網(wǎng)頁制作

2010-08-24 15:45:48

DIVCSSfloat

2010-09-06 15:46:08

CSSDIV

2010-09-02 13:03:38

CSS垂直居中

2010-08-16 14:18:49

DIV+CSS

2010-08-23 09:59:16

DIV+CSSSEO

2010-09-10 10:36:30

DIV CSS
點贊
收藏

51CTO技術(shù)棧公眾號