讓footer始終待在頁面底部
阿新 • • 發佈：2017-08-20
absolut 設置 導致 log 內容 tro 就會 遮蓋 height
1、把html和body的height屬性設為100%;保證content的高度能撐滿瀏覽器;
2、把#content的高度也設置為100% ，但是這裏我們使用了“min-height”屬性，而不是的height屬性，這是因為如果#main中的內容如果增加了，他的高度超過了瀏覽器窗口的高度，那麽如果把#content的高度仍然是100%，就會導致#footer仍然定位在瀏器窗口的下端，從而遮蓋了#content中的內容。
3、將#content設置為相對定位，目的是使他成為它裏面的#footer的定位基準然後把#foooter設置為絕對定位，並使之貼在#main的最下端。
註意，如果當我們把#footer貼在#content的最下端以後，他實際上已經和上面的#main這個div重疊了，為了避免覆蓋#main中的內容，我們在#main中設置了下側的padding，使padding-bottom的值等於#footer的高度 ，就可以保證避免覆蓋#main的文字了。
<style>
body,html { margin: 0; padding: 0; height:100%; } #content { min-height:100%; position: relative; } #main { padding: 10px; padding-bottom: 60px; } #footer { position: absolute; bottom: 0; padding: 10px 0; width: 100%; } #footer h1 { font: 20px/2 Arial; margin:0; padding:0 10px; } </style> <body> <div id="content">
<div id="main"> <h1>main</h1> <p>你可以改變瀏覽器窗口的高度，來觀察footer效果。</p> <p>文字文字文字文字文字文字文字文字文字文字</p> </div> <div id="footer"> <h1>Footer</h1> <div> </div> </body>
讓footer始終待在頁面底部