wordpress footer置底
生活随笔
收集整理的這篇文章主要介紹了
wordpress footer置底
小編覺得挺不錯的,現在分享給大家,幫大家做個參考.
/* 通過calc()函數讓內容區塊自動伸縮 */
.my-body{min-height: calc(71.7vh - 80px);
}
footer{height:50px;
}
vh,vw跟著顯示窗口（視圖）的寬度或高度，而不是父元素的寬度或高度 vw:viewport width，1vw相當于顯示窗口寬度的1%
vh:viewport height，1vh相當于顯示窗口高度的1% 兼容性：IE9+，chrome/firefox/safari/opera支持，[iOS]safari 8+支持，[Androidbrowser4.4+支持，chrome for android39支持
?
?參考：https://www.jianshu.com/p/6efe2c76a2dd
當我們要設置網頁中的footer置底（sticky footer），我們可以這樣辦
body元素內的結構代碼如下
<body><div class="main"><ul><li>啦啦啦啦</li><li>啦啦啦啦</li><li>啦啦啦啦</li></ul></div><footer><ul><li>聯系電話</li><li>請撥打111</li></ul></footer> </body>方式一:
<style>footer{position:absolute;bottom:0;} </style>但是當我們的內容區塊過多超過一屏時,就會出現footer不會隨著內容往后移(不再置底)的問題
?
接下來的兩種方式就能解決當內容過多時,footer永遠都置底
方式二：使用calc()設置內容高度
<style>*{margin:0;padding:0;}/* 通過calc()函數讓內容區塊自動伸縮 */.main{min-height: calc(100vh - 80px);}footer{height:50px;} </style>上面的80px=30px+50px，是因為假設內容區塊和footer的間距為30px，footer的高度是50px. 只需min-height: calc(100vh - 80px)一句話，我們就可以計算出內容區塊的自動伸縮高度，從而讓footer置底
注意,calc()使用加減法時要當心，記得在+,-號的前后加一個空格。這樣做的原因是在未來我們在calc()函數內部可能會用到關鍵字,為了到時候能區別開-是關鍵字的連字符還是運算符減號
方式三：使用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設置為一個大于0的值，比如flex:1，實現了內容區塊自動伸展并占滿所有的可用空間
注意，響應式網頁設計時，
vh:viewport height，1vh相當于顯示窗口高度的1%
利用Flexbox彈性盒子布局，僅用四行代碼，就實現了footer置底
作者：魚娟note
鏈接：https://www.jianshu.com/p/6efe2c76a2dd
來源：簡書
簡書著作權歸作者所有，任何形式的轉載都請聯系作者獲得授權并注明出處。
總結
以上是生活随笔為你收集整理的wordpress footer置底的全部內容，希望文章能夠幫你解決所遇到的問題。
- 上一篇： linux系统的运行级别
- 下一篇： 飞了，飞了，真的疯了