在做项目时,想要达到页脚固定在页面底部显示,也就是当页面主体高度在浏览器高度范围内时页脚靠浏览器底部,超出浏览器高度时页脚在页面主体下方,相当于在高度上的自适应。
乍看似乎很简单,固定在底部,用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值的高度就是用来容纳页脚的。
这样就实现了想要的效果,当然方法不止一种