HTML+CSS底部footer兩種固定方式
阿新 • • 發佈：2018-12-11
網頁常見的底部欄（footer）目前有兩種：
一、永久固定，不管頁面的內容有多高，footer一直位於瀏覽器最底部，適合做移動端底部選單，這個比較好實現;
二、相對固定，當頁面內容高度不沾滿瀏覽器高度，footer顯示在瀏覽器底部，且不會出現滾動條，如果頁面內容高度超出瀏覽器高度，footer則相對與內容的最底部，並且自動出現滾動條；
廢話不多說，可以直接複製程式碼檢視效果
一、永久固定
|
<!DOCTYPE html> <html> <head> <meta http-equiv="Content-Type" content="text/html; charset=utf-8" /> <title></title> <meta charset="utf-8" /> <style> body { padding-bottom: 50px; } .footer { position: fixed; left: 0px; bottom: 0px; width: 100%; height: 50px; background-color: #eee; z-index: 9999; } </style> </head> <body> 內容，可以大量複製看效果<br /> <div class="footer">固定在底部</div> </body> </html> |
二、相對固定
| <!DOCTYPE html> <html> <head> <meta http-equiv="Content-Type" content="text/html; charset=utf-8" /> <title></title> <meta charset="utf-8" /> <style type="text/css"> * { margin: 0px; padding: 0px; } html, body { height: 100%; } .footer { margin-top: -50px; height: 50px; background-color: #eee; z-index: 9999; } .wrap { min-height: 100%; } .main { padding-bottom: 50px; } </style> </head> <body> <div class="wrap"> <div class="main"> 內容，可以大量複製看效果<br /> </div> </div> <div class="footer">相對在底部</div> </body> </html> |