CSS 實現footer置底
阿新 • • 發佈：2018-03-24
margin class sid 高度 ide alc tex -h AD
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彈性布局
CSS 實現footer置底