當前位置：首頁 > 编程资源 > 编程问答 >内容正文

编程问答

背景平铺两栏自适应（占满剩余高度）fastclick、IScroll双飞翼布局

發布時間：2024/1/1 编程问答 32 豆豆

生活随笔收集整理的這篇文章主要介紹了背景平铺两栏自适应（占满剩余高度）fastclick、IScroll双飞翼布局小編覺得挺不錯的,現在分享給大家,幫大家做個參考.

文章目錄

- - - 背景平鋪
    - 兩欄自適應（占滿剩余高度）
    - - 需求
        實現
    - fastclick插件的使用
    - IScroll插件的使用（實現區域滾動效果）
    - - 條件
    - 雙飛翼布局（兩邊固定寬度，中間自適應）
    - - 條件
        實現

背景平鋪

/*可應用于精靈圖*/ /*讓背景從內容開始平鋪*/ -webkit-background-origin: content-box; background-origin: content-box;/*沒有做背景裁剪背景圖片就是默認從邊框顯示*/ /* border-box 邊框之外被裁減掉 padding-box 內邊距以外被裁減掉 content-box 內容以外被裁減掉 */ background-clicp:content-box;

兩欄自適應（占滿剩余高度）

需求

左側邊欄固定，右側邊欄自適應，并占滿剩余高度

實現

header使用定位脫離標準流
content: overflow:hidden;
left: 定義寬度，高度100%，左浮動
right:高度100%,通過padding-top控制內容起始位置

<!DOCTYPE html> <html lang="en"> <head><meta charset="UTF-8"><meta name="viewport" content="width=device-width, initial-scale=1.0, user-scalable=0"><title>Title</title><style>html,body{padding: 0;margin: 0;height: 100%;}.header{width: 100%;height: 50px;background-color: #4e6ef2;position: absolute;left: 0;top: 0;}.content{width: 100%;height: 100%;overflow: hidden;}.left{width: 50px;height: 100%;float: left;padding-top: 50px;background-color: blueviolet;}.right{height: 100%;padding-top:50px;background-color: lightskyblue;}img{float: left;}</style> </head> <body> <div class="header">hhh</div> <div class="content"><div class="left">hhh</div><div class="right"><img src="1.jpg" alt="">晚夜微雨問海棠晚夜微雨問海棠晚夜微雨問海棠晚夜微雨問海棠晚夜微雨問海棠晚夜微雨問海棠晚夜微雨問海棠晚夜微雨問海棠晚夜微雨問海棠晚夜微雨問海棠晚夜微雨問海棠晚夜微雨問海棠晚夜微雨問海棠晚夜微雨問海棠晚夜微雨問海棠晚夜微雨問海棠晚夜微雨問海棠晚夜微雨問海棠晚夜微雨問海棠晚夜微雨問海棠晚夜微雨問海棠晚夜微雨問海棠晚夜微雨問海棠晚夜微雨問海棠晚夜微雨問海棠晚夜微雨問海棠晚夜微雨問海棠晚夜微雨問海棠晚夜微雨問海棠晚夜微雨問海棠晚夜微雨問海棠晚夜微雨問海棠晚夜微雨問海棠晚夜微雨問海棠晚夜微雨問海棠晚夜微雨問海棠晚夜微雨問海棠晚夜微雨問海棠晚夜微雨問海棠晚夜微雨問海棠</div> </div> </body> </html>

fastclick插件的使用

click在移動端有300ms的延時，fastclick.js可提高移動端click的響應速度

IScroll插件的使用（實現區域滾動效果）

條件

一個容器裝著另一個容器
找到大容器
子容器大于父容器

/*Iscroll*/ /* * 區域滾動效果 * 條件：一個容器裝著一個容器html結構 * 找到大容器 * 子容器大于父容器 * */ window.onload=function () {document.querySelector('.box1').addEventListener('touchmove',function (e) {e.preventDefault();});new IScroll(document.querySelector('.box1'),{scrollX:false,scrollY:true}); };

雙飛翼布局（兩邊固定寬度，中間自適應）

條件

header和bottom各自占領屏幕所有寬度，高度固定
中間的content是一個三欄布局
三欄布局兩側寬度固定，中間自動填充整個區域

實現

left，center，right左浮動（注意html中center在left和right之前）
left的外邊距：margin-left:-100%;
right的外邊距：margin-left：right寬度的負數
center中的內容設置左右邊距分別是left和right的寬，寬度100%

<!DOCTYPE html> <html lang="en"> <head><meta charset="UTF-8"><title>Title</title><style>.header{width: 100%;height: 60px;background-color: lightskyblue;}.content{overflow: hidden;height: 350px;}.left,.center,.right{float: left;height: 100%;}.left{width: 200px;margin-left: -100%;background-color: #4e6ef2;}.right{width: 150px;margin-left: -150px;background-color: blueviolet;}.center{width: 100%;height: 100%;background-color: blue;}.bottom{width: 100%;height: 80px;background-color: yellowgreen;}.con{margin:0 150px 0 200px;}</style> </head> <body> <div class="header"></div> <div class="content"><div class="center"><div class="con"><img src="1.jpg" alt=""></div></div><div class="left">hhh</div><div class="right">hhh</div> </div> <div class="bottom"></div> </body> </html>

總結

以上是生活随笔為你收集整理的背景平铺两栏自适应（占满剩余高度）fastclick、IScroll双飞翼布局的全部內容，希望文章能夠幫你解決所遇到的問題。

如果覺得生活随笔網站內容還不錯，歡迎將生活随笔推薦給好友。

上一篇： oracle erp的库存管理软件,教你
下一篇：快递运单号与手机号识别在快递驿站场景中应