如何用CSS把层固定在整个网页的最底部?

html-css030

如何用CSS把层固定在整个网页的最底部?,第1张

html代码

<body>

<DIV id="container">

<DI id="content">

<h1>Content</h1>

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

<p>这里是示例文字,DIV固定………,这里是示例文字。</p>

</DIV>

<DIV Vid="footer">

<h1>Footer</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

}

1、首先我不给div定位来看看两个div在浏览器中是如何显示的,具体的代码如下:

如下图,可以看到两个div在没使用定位的情况下显示的位置,我们可以发现div是个块,自动换行了。

2、相对定位:首先给div2使用相对定位,用position:relative来实现的,具体的代码如下:

可以看到如下图,div2的位置离div1的位置偏移了上边四十个像素,左边四十个像素。

3、绝对定位:现在来看看绝对定位,使得div1和div2能重叠,具体的代码如下:

如下图是不是发现两个div块重叠了,具体的效果如下图。

4、绝对定位:现在我来使得div1的绝对定位边60px,左边60px,看看执行的效果是什么样子呢?具体的代码如下:

可以看到如下图的执行效果,是不是得出了绝对定位的定位点是浏览器左上角坐标点为(0,0)这个像素点为起点的。

5、div块加文字P:这里为了说明下个定位相关的知识,我先做如下的模型,具体的代码如下:

如下图可以看到文字在div块中,那么我们该如何使得div中文字总是在div块中呢,这里说的是使用绝对定位的情况下。

6、div和文字:将div块设置成绝对定位,看看文字显示的位置,具体的代码如下:

如下图,是不是发现文字没有在div块中了。

7、div绝对定位下块中的文字:这里我要实现div在绝对定定位下,div以及能在块中,具体的代码如下:

上面相对,下面绝对,具体的显示效果如下图。

你好!

给body加个父级属性,给bottom加个子级属性。然后设置bottom定位位置底部。

例如body{position:relative}

.bottom:{position:absolutebottom:0}

希望对你有所帮助,望采纳。