怎样将header和footer分别固定在页面上的最两端

81 阅读 0 评论 54 点赞

我是靠谱客的博主感性篮球，最近开发中收集的这篇文章主要介绍怎样将header和footer分别固定在页面上的最两端，觉得挺不错的，现在分享给大家，希望可以做个参考。

概述

html代码为

<html>

<body>
<div id="page">
<div id="header">
<div id="nav">nav</div>
</div>
<div id="content">here is content many content many many contenthere is content many content many many contenthere is content many content many many contenthere is content many content many many contenthere is content many content many many contenthere is content many content many many contenthere is content many content many many contenthere is content many content many many contenthere is content many content many many contenthere is content many content many many contenthere is content many content many many contenthere is content many content many many contenthere is content many content many many contenthere is content many content many many contenthere is content many content many many contenthere is content many content many many contenthere is content many content many many contenthere is content many content many many contenthere is content many content many many contenthere is content many content many many contenthere is content many content many many contenthere is content many content many many contenthere is content many content many many contenthere is content many content many many contenthere is content many content many many contenthere is content many content many many contenthere is content many content many many contenthere is content many content many many contenthere is content many content many many contenthere is content many content many many contenthere is content many content many many contenthere is content many content many many contenthere is content many content many many contenthere is content many content many many contenthere is content many content many many contenthere is content many content many many contenthere is content many content many many contenthere is content many content many many contenthere is content many content many many contenthere is content many content many many contenthere is content many content many many contenthere is content many content many many contenthere is content many content many many contenthere is content many content many many contenthere is content many content many many contenthere is content many content many many contenthere is content many content many many contenthere is content many content many many contenthere is content many content many many contenthere is content many content many many contenthere is content many content many many contenthere is content many content many many contenthere is content many content many many contenthere is content many content many many contenthere is content many content many many contenthere is content many content many many contenthere is content many content many many contenthere is content many content many many contenthere is content many content many many contenthere is content many content many many contenthere is content many content many many contenthere is content many content many many contenthere is content many content many many contenthere is content many content many many contenthere is content many content many many contenthere is content many content many many contenthere is content many content many many contenthere is content many content many many contenthere is content many content many many contenthere is content many content many many contenthere is content many content many many contenthere is content many content many many contenthere is content many content many many contenthere is content many content many many contenthere is content many content many many contenthere is content many content many many contenthere is content many content many many contenthere is content many content many many contenthere is content many content many many contenthere is content many content many many contenthere is content many content many many contenthere is content many content many many contenthere is content many content many many contenthere is content many content many many contenthere is content many content many many contenthere is content many content many many contenthere is content many content many many contenthere is content many content many many contenthere is content many content many many contenthere is content many content many many contenthere is content many content many many contenthere is content many content many many contenthere is content many content many many contenthere is content many content many many contenthere is content many content many many contenthere is content many content many many contenthere is content many content many many contenthere is content many content many many contenthere is content many content many many contenthere is content many content many many contenthere is content many content many many contenthere is content many content many many contenthere is content many content many many contenthere is content many content many many contenthere is content many content many many contenthere is content many content many many contenthere is content many content many many contenthere is content many content many many contenthere is content many content many many contenthere is content many content many many contenthere is content many content many many contenthere is content many content many many contenthere is content many content many many contenthere is content many content many many contenthere is content many content many many contenthere is content many content many many contenthere is content many content many many contenthere is content many content many many contenthere is content many content many many contenthere is content many content many many contenthere is content many content many many contenthere is content many content many many contenthere is content many content many many contenthere is content many content many many contenthere is content many content many many contenthere is content many content many many contenthere is content many content many many contenthere is content many content many many contenthere is content many content many many contenthere is content many content many many contenthere is content many content many many contenthere is content many content many many contenthere is content many content many many contenthere is content many content many many contenthere is content many content many many content</div>
<div id="footer">footer</div>
</div>
</body>

</html>

css代码为

html,body{
	height:100%;
}
#page {
	    min-heigth:100%;
	    postion:relative;
        }

        #header {
            max-width: 640px;
	    min-width:320px;
            height: 60px;
            position: absolute;
            top: 0;
            background-color: #ccc;
	    z-index:9999;
        }

        #footer {
            max-width: 640px;
	    min-width:320px;
            height: 30px;
            position: absolute;
            bottom: 0;
            background-color: #ccc;
        }

        #content {
            padding-bottom:30px;
	    padding-top:60px;
            overflow: auto;
        }

第一种效果是div#content的内容上下滚动时，两端位置在改变

第一步：把HTML和BODY的HEIGHT属性设为100%;保证content的高度能撑满浏览器；

第二步：把#page的高度也设置为100%，但是这里我们使用了“min-height”属性，而不是的height属性，这是因为如果#content中的内容如果增加了，他的高度超过了浏览器窗口的高度，那么如果把#page的高度仍然是100%，就会导致#footer仍然定位在浏器窗口的下端，从而遮盖了#content中的内容。而使用min-height属性的作用就是使#content的高度“至少”为浏览器窗口的高度，而当如果它里面的内容增加了，他的高度会也跟随着增加。

第三步：将#page设置为相对定位，目的是使他成为它里面的#footer和#header的定位基准

第四步：把#footer 和#header 设置为绝对定位，并使之分别贴在#main的最下端、最上端。

但是要注意，（1）如果当我们把#footer贴在#content的最下端以后，他实际上已经和上面的#main这个div重叠了，为了避免覆盖#main中的内容，我们分别在#main中设置了上下两侧的padding，使padding-top的值等于#header的高度，使padding-bottom的值等于#footer的高度，就可以保证避免覆盖#main的文字了。

（2）由于当元素设置了 absolute 后，默认就不是100%的宽度了，而是内容多宽就是多宽，因此需要分别给#header和#footer设置和和父容器一样是的100% 宽度；

第二种效果是div#content的内容上下滚动时，两端位置固定不变

（1）将上述#page和#header的position: absolute替换为position:fixed;

（2）此时向上滚动时，#content溢出的内容会出现在#header中，因此给#header

设置一个z-index覆盖元素，便#header一直处于最高层；

注：此文主要参考来源http://blog.csdn.net/cs958903980/article/details/51613035