什么是sticky footer布局
我們常見的網站頁面都會把一個頁面分為：頭部區、內容區、頁腳區,當頭部區和內容區內容較少時,頁腳區能固定在網頁底部,而不是隨著文檔流排布。當頁面內容較多時，頁腳能隨著文檔內容自動撐開,顯示在頁面的最底部。這就是sticky footer布局。
實現方式
flex 實現
html代碼
<header class="header"></header> <main class="content"> <p>近段時間房管局四大金剛</p> <p>近段時間房管局四大金剛</p> <p>近段時間房管局四大金剛</p> <p>近段時間房管局四大金剛</p> <p>近段時間房管局四大金剛</p> <p>近段時間房管局四大金剛</p> <p>近段時間房管局四大金剛</p> <p>近段時間房管局四大金剛</p> <p>近段時間房管局四大金剛</p> <p>近段時間房管局四大金剛</p> <p>近段時間房管局四大金剛</p> <p>近段時間房管局四大金剛</p> <p>近段時間房管局四大金剛</p> <p>近段時間房管局四大金剛</p> <p>近段時間房管局四大金剛</p> <p>近段時間房管局四大金剛</p> <p>近段時間房管局四大金剛</p> <p>近段時間房管局四大金剛</p> <p>近段時間房管局四大金剛</p> <p>近段時間房管局四大金剛</p> <p>近段時間房管局四大金剛</p> <p>近段時間房管局四大金剛</p> <p>近段時間房管局四大金剛</p> <p>近段時間房管局四大金剛</p> <p>近段時間房管局四大金剛</p> <p>近段時間房管局四大金剛</p> <p>近段時間房管局四大金剛</p> <p>近段時間房管局四大金剛</p> <p>近段時間房管局四大金剛</p> <p>近段時間房管局四大金剛</p> <p>近段時間房管局四大金剛</p> <p>近段時間房管局四大金剛</p> <p>近段時間房管局四大金剛</p> <p>近段時間房管局四大金剛</p> <p>近段時間房管局四大金剛</p> <p>近段時間房管局四大金剛</p> </main> <footer class="footer"></footer>
css代碼
*{ margin: 0; padding: 0;}html,body{ display: flex; flex-direction: column; min-height: 100%; width: 100%;}.header{ background: gray; height: 20px;}.content{ flex: 1; overflow: auto; background: greenyellow;}.footer{ background: pink; height: 20px;}flex布局方法簡單代碼少，因為pc端兼容性不是很好，可以廣泛用于移動端。
負margin布局方式
html代碼
<div class="wrapper clearfix"> <div class="title"> <h1>這里是頭部</h1> </div> <div class="main"> <p>近段時間房管局四大金剛</p> <p>近段時間房管局四大金剛</p> <p>近段時間房管局四大金剛</p> <p>近段時間房管局四大金剛</p> <p>近段時間房管局四大金剛</p> <p>近段時間房管局四大金剛</p> <p>近段時間房管局四大金剛</p> <p>近段時間房管局四大金剛</p> <p>近段時間房管局四大金剛</p> <p>近段時間房管局四大金剛</p> <p>近段時間房管局四大金剛</p> <p>近段時間房管局四大金剛</p> <p>近段時間房管局四大金剛</p> <p>近段時間房管局四大金剛</p> <p>近段時間房管局四大金剛</p> <p>近段時間房管局四大金剛</p> <p>近段時間房管局四大金剛</p> <p>近段時間房管局四大金剛</p> <p>近段時間房管局四大金剛</p> <p>近段時間房管局四大金剛</p> </div> </div> <div class="footer"> <p>© 2017 No rights reserved.</p> <p>Made with ♥ by an anonymous pastafarian.</p> </div>
css代碼
* { margin: 0; padding: 0; text-align: center;}.wrapper { min-height: 100%; width: 100%;}.main { margin-top: 64px; padding-bottom: 64px;}.footer { margin: -64px auto 0 auto; background: orange;}.clearfix::after { display: block; content: "."; height: 0; clear: both; visibility: hidden;}這是兼容性最好的方案,各大瀏覽器都可兼容，就是需要提前知道footer的高度。且結構相對復雜。
以上就是本文的全部內容，希望對大家的學習有所幫助，也希望大家多多支持武林網。
新聞熱點
疑難解答
