如何将页脚固定在页面的底部

首先,我们搭出大体的结构:

<body>

    <div id="container">

        <div id="header">Header Title</div>

        <div id="page" class="clearfix">

            <div id="left">Left Sider</div>

            <div id="content">Main Content</div>

            <div id="right">Right Sider</div>

        </div>

    <div id="footer">Footer Section</div>

    </div>

</body>

对于css:

1. reset: 去除html, body的margin, padding. 并且设置height为100%, 为的是方便以后子元素设置百分比。

2.我们还需要在div#container容器中设置一个"position:relative"以便于里面的元素进行绝对定位后不会跑了div#container容器。

3.div#page这个容器有一个很关键的设置,需要在这个容器上设置一个padding-bottom值,而且这个值要等于(或略大于)页脚div#footer的高度(height)值,但有一点需要注意,此处你千万不能使用margin-bottom来代替padding-bottom,不然会无法实现效果

4.div#footer容器:div#footer容器必须设置一个固定高度,单位可以是px(或em)。div#footer还需要进行绝对定位,并且设置bottom:0;让div#footer固定在容器div#container的底部,这样就可以实现我们前面所说的效果,当内容只有一点时,div#footer固定在屏幕的底部(因为div#container设置了一个min-height:100%),当内容高度超过屏幕的高度,div#footer也固定在div#container底部,也就是固定在页面的底部。你也可以给div#footer加设一个"width:100%",让他在整个页面上得到延伸;

CSS代码:

html,body {

margin: 0;

padding:0;

height: 100%;

}

#container {

min-height:100%;

height: auto !important;

height: 100%; /*IE6不识别min-height*/

position: relative;

}

#header {

background: #ff0;

padding: 10px;

}



#page {

width: 960px;

margin: 0 auto;

padding-bottom: 60px;/*等于footer的高度*/

}



#footer {

position: absolute;

bottom: 0;

width: 100%;

height: 60px;/*脚部的高度*/

background: #6cf;

clear:both;

}

/*=======主体内容部分=======*/

#left {

width: 220px;

float: left;

margin-right: 20px;

background: lime;

}



#content {

background: orange;

float: left;

width: 480px;

margin-right: 20px;

}



#right{

background: green;

float: right;

width: 220px;

}

你可能感兴趣的:(页面)