背景平铺两栏自适应（占满剩余高度）fastclick、IScroll双飞翼布局
生活随笔
收集整理的這篇文章主要介紹了
背景平铺两栏自适应（占满剩余高度）fastclick、IScroll双飞翼布局
小編覺得挺不錯(cuò)的,現(xiàn)在分享給大家,幫大家做個(gè)參考.
文章目錄
- 背景平鋪
- 兩欄自適應(yīng)（占滿剩余高度）
- 需求
- 實(shí)現(xiàn)
- fastclick插件的使用
- IScroll插件的使用（實(shí)現(xiàn)區(qū)域滾動(dòng)效果）
- 條件
- 雙飛翼布局（兩邊固定寬度，中間自適應(yīng)）
- 條件
- 實(shí)現(xiàn)
背景平鋪
/*可應(yīng)用于精靈圖*/ /*讓背景從內(nèi)容開始平鋪*/ -webkit-background-origin: content-box; background-origin: content-box;/*沒有做背景裁剪 背景圖片就是默認(rèn)從邊框顯示*/ /* border-box 邊框之外被裁減掉 padding-box 內(nèi)邊距以外被裁減掉 content-box 內(nèi)容以外被裁減掉 */ background-clicp:content-box;兩欄自適應(yīng)（占滿剩余高度）
需求
左側(cè)邊欄固定，右側(cè)邊欄自適應(yīng)，并占滿剩余高度
實(shí)現(xiàn)
header使用定位脫離標(biāo)準(zhǔn)流
content: overflow:hidden;
left: 定義寬度，高度100%，左浮動(dòng)
right:高度100%,通過(guò)padding-top控制內(nèi)容起始位置
fastclick插件的使用
click在移動(dòng)端有300ms的延時(shí)，fastclick.js可提高移動(dòng)端click的響應(yīng)速度
<script>/*當(dāng)前頁(yè)面的dom元素加載完畢*/document.addEventListener('DOMContentLoaded',function () {/*初始化方法*/FastClick.attach(document.body);},false);/*正常使用click就行了*/ </script>IScroll插件的使用（實(shí)現(xiàn)區(qū)域滾動(dòng)效果）
條件
- 一個(gè)容器裝著另一個(gè)容器
- 找到大容器
- 子容器大于父容器
雙飛翼布局（兩邊固定寬度，中間自適應(yīng)）
條件
- header和bottom各自占領(lǐng)屏幕所有寬度，高度固定
- 中間的content是一個(gè)三欄布局
- 三欄布局兩側(cè)寬度固定，中間自動(dòng)填充整個(gè)區(qū)域
實(shí)現(xiàn)
- left，center，right左浮動(dòng)（注意html中center在left和right之前）
- left的外邊距：margin-left:-100%;
- right的外邊距：margin-left：right寬度的負(fù)數(shù)
- center中的內(nèi)容設(shè)置左右邊距分別是left和right的寬，寬度100%
總結(jié)
以上是生活随笔為你收集整理的背景平铺两栏自适应（占满剩余高度）fastclick、IScroll双飞翼布局的全部?jī)?nèi)容，希望文章能夠幫你解決所遇到的問(wèn)題。
- 上一篇： oracle erp的库存管理软件,教你
- 下一篇： 快递运单号与手机号识别在快递驿站场景中应