页脚如何始终固定在页面底部显示

在做项目时，想要达到页脚固定在页面底部显示，也就是当页面主体高度在浏览器高度范围内时页脚靠浏览器底部，超出浏览器高度时页脚在页面主体下方，相当于在高度上的自适应。

乍看似乎很简单，固定在底部，用fixed定位就好啦，但是页面一屏显示不下时，页脚会遮挡页面内容。看到公司很多之前的页面，大屏幕下页脚都是悬空显示的，也是醉了，可能是之前屏幕分辨率较小，页脚就处于正常的文档流中，加个上边距。

现在常用这种方法：

  html文档结构如下：

<body>
    <wrap>
       <header></header>
       <main></main>
    </wrap>
    <footer></footer>
</body>

将页头和页面主体内容放到同一个容器中，页脚单独，之后设置样式

html,body {
   margin:0;
   padding:0;
   height:100%;
}
.wrap {
   min-height: 100%;
   height: auto !important; 
}
.main {
   padding-bottom: 80px; //页脚高度+页脚与容器的距离
}
.footer {
   height: 60px;  //页脚高度
   margin-top: -60px;  //一个页脚高度的负外边距   
}

原理是这样的：

首先无论页面内容有多少，设置它占有的高度都至少是100%(min-height:100%),然后设置页面的高度根据容器内容的高度自适应，下面要考虑页脚的位置，设置一个负的外边距使页脚在高度100%范围内显示，这样带来的问题是与wrap得部门内容重合，于是设置main的padding-bottom使部分内容空出来，这个padding-bottom值的高度就是用来容纳页脚的。

这样就实现了想要的效果，当然方法不止一种

 

posted @ 2016-01-13 12:05  yannanyan  阅读(2924)  评论(0)  编辑  收藏  举报