1.将内容部分的margin-bottom设置为负数
<style type="text/css"> *{padding:0;margin:0;} html,body{height:100%;} .wrapper{ min-height:100%; margin-bottom:-50px;/* 等于footer的高度 */ } .footer, .push{ height: 50px; background:red; } </style> </head> <body> <div class="wrapper"> <div class="push"></div> </div> <div class="footer">footer</div> </body>
2. 将页脚的margin-top设置为负数
<style type="text/css"> *{padding:0;margin:0;} html,body{height:100%;} .content{ min-height:100%; } .content-inside{ padding:20px; padding-bottom:50px; background:blue; } .footer{ height: 50px; background:red; margin-top:-50px; } </style> </head> <body> <div class="content"> <div class="content-inside"></div> </div> <div class="footer">footer</div> </body>
3.使用calc设置内容高度
<style type="text/css"> *{padding:0;margin:0;} html,body{height:100%;} .content{ height: calc(100% - 50px); } .footer{ background:red; height: 50px; } </style> </head> <body> <div class="content"> </div> <div class="footer">footer</div> </body>
4.使用flex弹性布局