資訊專欄INFORMATION COLUMN
摘要：嵌套層級不深，可直接繼承自我是內(nèi)容我是腳為本身高度為本身高度嵌套層級很深，無法直接從上級繼承百分比高度的第一種方法給需要的創(chuàng)建一個我是內(nèi)容我是腳這樣就可以直接從繼承百分比高度了當(dāng)高度超過時產(chǎn)生滾動條繼承自內(nèi)部包裹的結(jié)構(gòu)，就
sticker-footer 1、嵌套層級不深，可直接繼承自 body width：100%； height:100%;
// html
我是內(nèi)容
// css
html,body{
width:100%;
height:100%;
}
#sticker{
width:100%;
min-height:100%;
}
.sticker-con{
padding-bottom:40px; // 40px 為 footer 本身高度
}
.footer{
margin-top:-40px; // 40px 為 footer 本身高度
}
2、嵌套層級很深，無法直接從上級繼承 百分比高度的
第一種方法：給需要的 sticker-footer 創(chuàng)建一個 wrapper
我是內(nèi)容
.wrapper{
position:fixed; // 這樣 wrapper 就可以直接從 html,body 繼承 百分比高度了
overflow:auto; // 當(dāng)高度超過 100% ;時產(chǎn)生滾動條
width:100%;
height:100%; // 繼承自 body
}
// wrapper 內(nèi)部包裹的結(jié)構(gòu)，就如上所示了，css樣式也一樣
3. 當(dāng)無法用百分比獲取高度時，也可通過js方式獲得
//css樣式同第一種， 只是 sticker 的 min-height 用css獲取
我是內(nèi)容
var sticker = document.querySelector("#sticker");
var h = document.body.clientHeight;
sticker.style.minHeight = h - 44 + "px";
//這種方式也可應(yīng)對一些特殊情況，比如有頭部導(dǎo)航欄的情況，可以靈活的處理 min-height:
4. 強(qiáng)大的 flex 布局 flex-direction:column
將wrapper容器 display:flex; flex-direction:column
sticker: flex:1; 占據(jù)除footer以外的剩余空間
sticker footer
我是頭部
我是內(nèi)容
文章版權(quán)歸作者所有，未經(jīng)允許請勿轉(zhuǎn)載,若此文章存在違規(guī)行為，您可以聯(lián)系管理員刪除。
轉(zhuǎn)載請注明本文地址：http://m.hztianpu.com/yun/115573.html
摘要：前言三欄布局，顧名思義就是兩邊固定，中間自適應(yīng)。三欄布局在實際的開發(fā)十分常見，比如淘寶網(wǎng)的首頁，就是個典型的三欄布局即左邊商品導(dǎo)航和右邊導(dǎo)航固定寬度，中間的主要內(nèi)容隨瀏覽器寬度自適應(yīng)。但網(wǎng)格布局的兼容性不好。 前言 三欄布局，顧名思義就是兩邊固定，中間自適應(yīng)。三欄布局在實際的開發(fā)十分常見，比如淘寶網(wǎng)的首頁，就是個典型的三欄布局：即左邊商品導(dǎo)航和右邊導(dǎo)航固定寬度，中間的主要內(nèi)容隨瀏覽器寬...
摘要：前言三欄布局，顧名思義就是兩邊固定，中間自適應(yīng)。三欄布局在實際的開發(fā)十分常見，比如淘寶網(wǎng)的首頁，就是個典型的三欄布局即左邊商品導(dǎo)航和右邊導(dǎo)航固定寬度，中間的主要內(nèi)容隨瀏覽器寬度自適應(yīng)。但網(wǎng)格布局的兼容性不好。 前言 三欄布局，顧名思義就是兩邊固定，中間自適應(yīng)。三欄布局在實際的開發(fā)十分常見，比如淘寶網(wǎng)的首頁，就是個典型的三欄布局：即左邊商品導(dǎo)航和右邊導(dǎo)航固定寬度，中間的主要內(nèi)容隨瀏覽器寬...
摘要：前言三欄布局，顧名思義就是兩邊固定，中間自適應(yīng)。三欄布局在實際的開發(fā)十分常見，比如淘寶網(wǎng)的首頁，就是個典型的三欄布局即左邊商品導(dǎo)航和右邊導(dǎo)航固定寬度，中間的主要內(nèi)容隨瀏覽器寬度自適應(yīng)。但網(wǎng)格布局的兼容性不好。 前言 三欄布局，顧名思義就是兩邊固定，中間自適應(yīng)。三欄布局在實際的開發(fā)十分常見，比如淘寶網(wǎng)的首頁，就是個典型的三欄布局：即左邊商品導(dǎo)航和右邊導(dǎo)航固定寬度，中間的主要內(nèi)容隨瀏覽器寬...
閱讀 3009·2021-11-23 09:51
閱讀 3165·2021-11-15 11:39
閱讀 3062·2021-11-09 09:47
閱讀 2592·2019-08-30 13:49
閱讀 2163·2019-08-30 13:09
閱讀 3164·2019-08-29 16:10
閱讀 3578·2019-08-26 17:04
閱讀 1109·2019-08-26 13:57
