分享一種固定頁教在頁面底部的方法
阿新 • • 發佈：2017-09-02
spa ctype mar bootstra blog pad type idt color
這裏是固定在頁面底部，而不是fixed瀏覽屏幕的底部。如下
這樣的方法有很多，這裏分享一種本人用過的。在last內容的div加上padding-bottom。
<!DOCTYPE html> <html> <head> <meta charset="UTF-8"> <title></title> <link rel="stylesheet" href="css/bootstrap.css" /> <style> html,body{ padding: 0; margin: 0; height: 100%; width: 100%; } </style> </head> <body> <div style="min-height: 100%;width: 100%;text-align: center;position: relative;"> <div>內容</div> <div>內容</div> <div>內容</div> <div>內容</div> <div>內容</div> <div>內容</div> <div>內容</div> <div>內容</div> <div>內容</div><div>內容</div> <div>內容</div> <div>內容</div> <div>內容</div> <div>內容</div> <div style="padding-bottom: 30px;">內容last</div> <div style="position: absolute;bottom: 0;width: 100%;height: 30px;background: yellowgreen;text-align: center;">頁腳</div> </div> </body> </html>
註意這裏不能把padding-bottom換成margin-bottom，換了不填充滿是看不出來的，一旦填充滿屏幕後，會導致以下結果，至於原因大概是margin會疊加的緣故。
分享一種固定頁教在頁面底部的方法