CSS实现Footer固定底部,超过一屏自动撑开
方法一:给html、body都设置100%的高度,确定body下内容设置min-height有效,然后设置主体部分min-height为100%,此时若没有header、footer则刚好完美占满全屏(参考《div绝对居中、宽高自适应、多栏宽度自适应》),但是有了这两个,只能另寻他路,由于高版本浏览器对box-sizing的支持,我们可以在100%的高度中通过padding给header、footer空出两部分空白区域,再通过给header设置等同于自身高度的负值margin-bottom,给footer设置等同于自身高度的负值margin-top,就完美的把两者移回可见区域,如此以来,既满足content部分不满一屏时footer在底部,又满足了,超过一屏时footer被撑开的需求。
<!doctype html> <html lang="en"> <head> <meta charset="UTF-8"> <title>footer始终处在底部</title> </head> <style> *{ margin: 0; padding: 0; box-sizing:border-box; } html,body { height: 100%;} header { height: 60px; margin-bottom: -60px; background: #1381cc; color: #FFF; position: relative; } section { background: #fff; min-height: 100%; padding: 60px 0 60px;} footer { height:60px; margin-top: -60px; background: #0c4367; color: #FFF; } </style> <body> <header></header> <section class="content"> <div style="height:1000px;"></div> </section> <footer class="footer"></footer> </body> </html>
方法二:将footer以外的部分再用wrap包裹起来,内部设置padding-bottom,footer相同的使用margin-top,如此以来不用使用border-box;
<!doctype html> <html lang="en"> <head> <meta charset="UTF-8"> <title>footer始终处在底部</title> </head> <style> *{ margin: 0; padding: 0; } html,body { height: 100%;} .wrap{ min-height: 100%; } .min{ padding-bottom: 60px; } header { height: 60px; background: #1381cc; color: #FFF; } section { background: #fff; } footer { height:60px; margin-top: -60px; background: #0c4367; color: #FFF; } </style> <body> <div class="wrap"> <div class="min"> <header></header> <section class="content"> <div style="height:10px;"></div> </section> </div> </div> <footer class="footer"></footer> </body> </html>
三:兼容更强