如何用CSS把層固定在整個(gè)網(wǎng)頁(yè)的最底部？

html代碼

網(wǎng)站制作、建網(wǎng)站找專(zhuān)業(yè)網(wǎng)站設(shè)計(jì)公司創(chuàng)新互聯(lián):定制網(wǎng)站、模板網(wǎng)站、仿站、重慶小程序開(kāi)發(fā)、軟件開(kāi)發(fā)、成都app開(kāi)發(fā)等。做網(wǎng)站價(jià)格咨詢(xún)創(chuàng)新互聯(lián):服務(wù)完善、十余年建站、值得信賴(lài)!網(wǎng)站制作電話：18980820575

body

DIV id="container"

DI id="content"

h1Content/h1

p請(qǐng)改變?yōu)g覽器窗口的高度，以觀察footer效果。/p

p這里是示例文字，DIV固定………，這里是示例文字。/p

/DIV

DIV Vid="footer"

h1Footer/h1

/DIV

/DIV

/body

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%;

}

#footerh1{

font:20px/2Arial;

margin:0;

padding:010px;

}

css實(shí)現(xiàn)div懸浮層，始終停留在瀏覽器的最下方，不隨頁(yè)面的滾動(dòng)條滾動(dòng)改變位置或消失

1、新建一個(gè)html文件，命名為test.html。

2、在test.html文件內(nèi)，使用div標(biāo)簽創(chuàng)建一個(gè)div，同時(shí)設(shè)置其class屬性為con,主要用于下面通過(guò)該類(lèi)名進(jìn)行樣式的設(shè)置。

3、在test.html文件內(nèi)，在div內(nèi)使用p標(biāo)簽創(chuàng)建一段測(cè)試文字的顯示。

4、在test.html文件內(nèi)，在div內(nèi)，再使用div標(biāo)簽創(chuàng)建一個(gè)類(lèi)名為ff的div，用于作為懸浮的div。

5、在test.html文件內(nèi)，在css標(biāo)簽內(nèi)，使用“*”初始化元素樣式，設(shè)置外邊距和內(nèi)邊距都為0。同時(shí)，設(shè)置類(lèi)名為con的div的樣式，設(shè)置其背景顏色為灰色，居中對(duì)齊，寬度為640px，高度為1000px。

6、在css標(biāo)簽內(nèi)，再設(shè)置類(lèi)名為ff的樣式，設(shè)置其高寬都為100px，背景顏色為紅色，使用position定位屬性設(shè)置div在頁(yè)面的絕對(duì)位置，距離頁(yè)面頂部為20px，距離頁(yè)面左邊為0px，從而實(shí)現(xiàn)div懸浮在頁(yè)面中。

7、在瀏覽器打開(kāi)test.html文件，查看實(shí)現(xiàn)的效果。

通過(guò) css 將 div 固定在底部 - css

對(duì)將要固定至底部的 div 設(shè)置如下 class 樣式即可：

設(shè)置基礎(chǔ)寬高后并添加絕對(duì)位置定位 position 為 fixed 和 bottom 為 0；

以上便是此次分享的全部?jī)?nèi)容，希望能對(duì)大家有所幫助！

CSS如何把DIV永遠(yuǎn)置于頁(yè)面的底部

position:fixed; bottom:0; 這個(gè)方法簡(jiǎn)單好用。

運(yùn)用這個(gè)CSS把DIV永遠(yuǎn)置于頁(yè)面的底部 利用絕對(duì)定位，然后設(shè)置底部距離為0。

這個(gè)div如果位置在所有div的后面，那么只要前面的div 的高度夠高的話，它的位置就會(huì)在頁(yè)面的頁(yè)面的底部的，一般想你這種說(shuō)的要讓他在頁(yè)面底部的話都是頁(yè)面高度太小，占不了滿(mǎn)屏，導(dǎo)致頁(yè)面底部部分下面有空白，你可以給這個(gè)div 前面的大的div 一個(gè)最小高度，讓它撐起來(lái)。

style

.main{min-height: 700px;}

/style

div class="header"/div

div class="main"/div

div class="footer"/div