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