如何用CSS把层固定在整个网页的最底部？
Posted
tags:
篇首语：本文由小常识网(cha138.com)小编为大家整理，主要介绍了如何用CSS把层固定在整个网页的最底部？相关的知识，希望对你有一定的参考价值。
参考技术A 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;
参考技术B
打开一个编辑软件设置一下css与div区域，使其固定在页面的底部。
其主要属性：position:fixed; 绝对定位生成绝对定位的元素，相对于浏览器窗口进行定位。
网页中实现效果如下：
扩展：还有一种定位方式为：position:absolute如上例方式浏览器滑动的时候，它会随着浏览器滚动条而滚动；而position:absolute则不会。
css的特点：
结构与样式分离的方式,便于后期维护与改版;
样式定义精确到像素的级别;
可以用多套样式,使网页有任意样式切换的效果；(如:www.YOUKU.COM的开,关灯效果)
降低服务器的成本。
如何用css将底部的内容定位到顶部
将底部的内容定位到顶部，只要在css层上面加上一个浮动，将定位至top设置成0即可。说明如下：
position：absolute（将对象浮动）
top:0; （将对象定位对顶部）
整体css示范如下：
如要将内容放至底部，只需将top:0修改成bottom:0即可，整体css未范如下：
希望我的回答能令你满意！
结合定位实现：
1)，如果希望相对于body或者是整个浏览器窗口定位
<body>
<div id="header">头部</div>
<div id="footer">尾部</div>
</body>
css:
#footerposition:absolute;left:0;top:0
1)，如果希望相对于包含它的容器定位
<body>
<div id="box">
<div id="header">头部</div>
<div id="footer">尾部</div>
</div>
</body>
css:
#boxposition:relative
#footerposition:absolute;left:0;top:0
参考技术B 您好，请问您是想知道如何用css将底部的内容定位到顶部吗？以上是关于如何用CSS把层固定在整个网页的最底部？的主要内容，如果未能解决你的问题，请参考以下文章