css实现让页面的footer始终位于底部
生活随笔
收集整理的這篇文章主要介紹了
css实现让页面的footer始终位于底部
小編覺得挺不錯的,現在分享給大家,幫大家做個參考.
在寫html頁面布局的時候經常會遇到這樣的情況：當頁面內容較少的時候footer下面會有留白這樣會很不好看，直接給footer，fixed定位的話當頁面內容多的時候，footer又會蓋住下面的內容。下面介紹幾種方法讓頁面的footer始終位于底部。
方法一：position: absolute; bottom:0; + min-height: 100%;padding-bottom:100px;
<!DOCTYPE html> <html lang="en"> <head><meta charset="UTF-8"><title>Document</title><style type="text/css">*{padding:0;margin:0}html,body{height: 100%;}.page{box-sizing: border-box;min-height: 100%;position: relative;padding-bottom:100px;}header{height: 60px;background: #333;}.content{background: #666;/*height: 1000px;*/}footer{width: 100%;height: 100px;background: #aaa;position: absolute;bottom:0;left: 0;}</style> </head> <body><div class="page"><header> 頭部 </header><div class="content"><p class="內容區"></p></div><footer> 底部 </footer></div> </body> </body> </html>復制代碼方法二:其實是對方法一做一些改造，html結構和方法一中的一樣。
<!DOCTYPE html> <html lang="en"> <head><meta charset="UTF-8"><title>Document</title><style type="text/css">*{padding:0;margin:0}html,body{height: 100%;}.page{min-height: 100%;position: relative;}header{height: 60px;background: #0d6aad;}.content{background: #00c7a6;/*height: 1000px;*/padding-bottom:100px;}footer{width: 100%;height: 100px;background: #1ab7ea;opacity: 0.6;position: absolute;bottom:0;left: 0;}</style> </head> <body><div class="page"><header> 頭部 </header><div class="content"><p class="內容區"></p></div><footer> 底部 </footer></div> </body> </body> </html> 復制代碼方法三：使用flexbox布局
<!DOCTYPE html> <html lang="en"> <head><meta charset="UTF-8"><title>Document</title><style type="text/css">*{padding:0;margin:0}html,body{height: 100%;}.page{display: flex;flex-direction: column;height: 100%;}header{height: 100px;background: #333;flex: 0 0 auto;}.content{background: #666;flex: 1 0 auto;/*height: 1000px;*/}footer{height: 100px;background: #999;flex: 0 0 auto;}</style> </head> <body><div class="page"><header> 頭部 </header><div class="content"><p class="內容區"></p></div><footer> 底部 </footer></div> </body> </body> </html> 復制代碼轉載于:https://juejin.im/post/5c1077165188251da07e0a81
總結
以上是生活随笔為你收集整理的css实现让页面的footer始终位于底部的全部內容，希望文章能夠幫你解決所遇到的問題。
- 上一篇： 年轻群体当道，哈弗F7如何赢得芳心？
- 下一篇： [译] 理解编译器 —— 从人类的角度（