wordpress footer置底
?
?參考：https://www.jianshu.com/p/6efe2c76a2dd
當(dāng)我們要設(shè)置網(wǎng)頁中的footer置底（sticky footer），我們可以這樣辦
body元素內(nèi)的結(jié)構(gòu)代碼如下
<body><div class="main"><ul><li>啦啦啦啦</li><li>啦啦啦啦</li><li>啦啦啦啦</li></ul></div><footer><ul><li>聯(lián)系電話</li><li>請撥打111</li></ul></footer> </body>方式一:
<style>footer{position:absolute;bottom:0;} </style>但是當(dāng)我們的內(nèi)容區(qū)塊過多超過一屏?xí)r,就會出現(xiàn)footer不會隨著內(nèi)容往后移(不再置底)的問題
?
接下來的兩種方式就能解決當(dāng)內(nèi)容過多時,footer永遠(yuǎn)都置底
方式二：使用calc()設(shè)置內(nèi)容高度
<style>*{margin:0;padding:0;}/* 通過calc()函數(shù)讓內(nèi)容區(qū)塊自動伸縮 */.main{min-height: calc(100vh - 80px);}footer{height:50px;} </style>上面的80px=30px+50px，是因?yàn)榧僭O(shè)內(nèi)容區(qū)塊和footer的間距為30px，footer的高度是50px. 只需min-height: calc(100vh - 80px)一句話，我們就可以計(jì)算出內(nèi)容區(qū)塊的自動伸縮高度，從而讓footer置底
注意,calc()使用加減法時要當(dāng)心，記得在+,-號的前后加一個空格。這樣做的原因是在未來我們在calc()函數(shù)內(nèi)部可能會用到關(guān)鍵字,為了到時候能區(qū)別開-是關(guān)鍵字的連字符還是運(yùn)算符減號
方式三：使用Flexbox彈性盒子布局
<style>*{margin:0;padding:0;}footer ul{list-style-type: none;}/*Flexbox彈性盒子，靈活解決*/body{display:flex;flex-flow:column;min-height:100vh;//100%;}.main{flex:1;} </style>其中，把flex設(shè)置為一個大于0的值，比如flex:1，實(shí)現(xiàn)了內(nèi)容區(qū)塊自動伸展并占滿所有的可用空間
注意，響應(yīng)式網(wǎng)頁設(shè)計(jì)時，
vh:viewport height，1vh相當(dāng)于顯示窗口高度的1%
利用Flexbox彈性盒子布局，僅用四行代碼，就實(shí)現(xiàn)了footer置底
作者：魚娟note
鏈接：https://www.jianshu.com/p/6efe2c76a2dd
來源：簡書
簡書著作權(quán)歸作者所有，任何形式的轉(zhuǎn)載都請聯(lián)系作者獲得授權(quán)并注明出處。
總結(jié)
以上是生活随笔為你收集整理的wordpress footer置底的全部內(nèi)容，希望文章能夠幫你解決所遇到的問題。
- 上一篇： linux系统的运行级别
- 下一篇： Android类参考---Fragmen