将页脚固定在页面的底部

最新推荐文章于 2021-06-03 16:27:35 发布

q707096967

最新推荐文章于 2021-06-03 16:27:35 发布

阅读量1.1k

点赞数

分类专栏： Web前端

Web前端专栏收录该内容

32 篇文章 0 订阅

订阅专栏

<!DOCTYPE html>
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />

<title>如何将页脚固定在页面的底部</title>
<script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs
/jquery/1.4.0/jquery.min.js"></script>
<style>
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;
}

</style>

</head>

<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>
</html>

对于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%"，让他在整个页面上得到延伸；