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

html-css017

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

}

要实现的效果:

如果上面元素较少,提交按钮在屏幕底部,如果上面元素较多,接近一屏,或者超过一屏,按钮随之下移。

需要以下几点:

如果不写第三条,在某种情况下会有问题。

当list总条数接近屏幕底部的时候,列表会被按钮挡住:

完整demo: