把div固定於頁面腳部(程式碼)
阿新 • • 發佈:2018-12-04
暫時沒時間編輯,直接上程式碼,以後再一一解釋
<!DOCTYPE html> <html> <head> <meta charset="UTF-8"> <meta name="viewport"content="width=device-width, user-scalable=no, initial-scale=1.0, maximum-scale=1.0, minimum-scale=1.0" /> <title></title> <style type="text/css"> html,body{ height: 100%; } *{ padding: 0px; margin: 0px; } .header,.footer{ font-size: 20px; font-weight: 800; width: 100%; height: 60px; line-height: 60px; text-align: center; color: white; } .header{ background: rgba(0,0,0,0.5); margin-bottom: 10px; } .mian{ min-height: 100%; height: auto !important; padding-bottom: 60px; height: 100%; background: #CECECE; } .content{ background: #FFFFFF; width: 90%; margin: 0px auto; box-shadow: 2px 0px 10px #000, 0px 2px 10px #000; margin-top: 0px; } .footer{ background: #FF4F01; position: relative; clear:both; margin-top: -60px; } </style> </head> <body> <div class="mian"> <header class="header"> 頭部 </header> <div class="content"> <br /><br /><br /><br /><br /><br /><br /><br /><br /> <br /><br /><br /><br /><br /><br /><br /><br /><br /> <br /><br /><br /><br /><br /><br /><br /><br /><br /> <br /><br /><br /><br /><br /><br /><br /><br /><br /> <br /><br /><br /><br /><br /><br /><br /><br /><br />1 </div> 1 </div> <footer class="footer"> 腳部 </footer> </body> </html>