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

html-css022

如何用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

}

楼上的哥们已经回答的很好了,我这里补充一下,首先建议你用火狐狸浏览器,然后安装firebug这样好调试。

此外,根据经验,加2个东西

.clear{clear:bothwidth:0pxheight:0pxfont:0px/0pxoverflow:hidden}/* 清除浮动、宽、高、字样式

然后在底部的div之前(一般都是 <div class=bottom>这个标签之前加一个

<div class="clear"></div>

可以解决大多数浮动问题。