您的位置：首页 > Web前端 > CSS

页面前台-用DIV+CSS让footer始终在底部

2012-02-21 22:17 549 查看

css如何定位网站的footer（用DIV+CSS让footer始终在底部）
平时拿CSS布局都是一些内容比较多的网站,前两天用CSS+DIV弄了个内容少的页面,发现了一个小问题,可能大家都会遇到,那就是网站FOOTER的定位,如果内容比较少的话,页面的FOOTER就会随着内容的减少跑到上面去,不是乖乖的在下面呆着,害得我研究了半天。

对于变量的内容，使得footer始终存在底部。并且整合了列表选项。使得页面排版更加工整。

一个典型的固定宽度的布局，该布局由顶部的一个标题，一个三列内容的区域（主内容列，每侧有一个工具条），和页面底部的一个页脚所组成。

--------------最后效果如下---------------------------------------

-----------以下是XHTML代码------------

<body>
<div id="content">
<div id="head">
<h1>hello</h1>
</div>
<div id="side1">
<h3>side1</h3>
<ul>
<li>Let me not to the marriage of true minds</li>
<li>Admit impediments; love is not love</li>
<li>Which alters when it alteration finds</li>
<li>Or bends with the remover to remove</li>
<li>Oh, no, it is an ever fixed mark</li>
</ul>
</div>
<div id="main">
<h1>main</h1>
<p>你可以改变浏览器窗口的高度，来观察footer效果。</p>
<p>文字文字文字文字文字文字文字文字文字文字</p>
<p> </p>
<p> </p>
<p> </p>
<p> </p>
<p> </p>
<p> </p>

</div>
<div id="side2">
<h3>side2</h3>
<ul>
<li>Let me not to the marriage of true minds</li>
<li>Admit impediments; love is not love</li>
<li>Which alters when it alteration finds</li>
</ul>
</div>
<div id="footer">
<h1>Footer</h1>
<div>
</div>
</body>

-----------以下是CSS代码---------------------------

body,html {
margin: 0;
padding: 0;
font: 12px/1.5 arial;
height:100%;
}
h1,h2,h3 {
margin-top: 0px;
padding-top: 0px;
}
#content {
min-height:100%;
height:auto;
position: relative;

}
#head
{
position: absolute;
left: 0px;
top: 0px;
width:750px;
height:100px;
background-color:#FF0
}
div#side1 {
position:absolute;
width:150px;
top: 100px;
left:0px;
background-color: #FF6666;
}
#main {
padding-bottom: 60px;
position: relative;
left: 150px;
top: 100px;
width: 450px;
margin: 0px;
background-color: #999999;
}
div#side2 {
position:absolute;
width:150px;
top: 100px;
left: 600px;
background-color: #00FF66;
}
#footer {
position: absolute;
bottom: 0;
padding: 10px 0;
background-color: #AAA;
width: 100%;
}
#footer h1 {
font: 20px/2 Arial;
margin:0;
padding:0 10px;
}

</style>

内容来自用户分享和网络整理，不保证内容的准确性，如有侵权内容，可联系管理员处理

标签：

相关文章推荐

新的分享

章节导航