日韩性视频-久久久蜜桃-www中文字幕-在线中文字幕av-亚洲欧美一区二区三区四区-撸久久-香蕉视频一区-久久无码精品丰满人妻-国产高潮av-激情福利社-日韩av网址大全-国产精品久久999-日本五十路在线-性欧美在线-久久99精品波多结衣一区-男女午夜免费视频-黑人极品ⅴideos精品欧美棵-人人妻人人澡人人爽精品欧美一区-日韩一区在线看-欧美a级在线免费观看

歡迎訪問 生活随笔！

生活随笔

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

编程问答

背景平铺两栏自适应（占满剩余高度）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的響應速度

<script>/*當前頁面的dom元素加載完畢*/document.addEventListener('DOMContentLoaded',function () {/*初始化方法*/FastClick.attach(document.body);},false);/*正常使用click就行了*/ </script>

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双飞翼布局的全部內容，希望文章能夠幫你解決所遇到的問題。

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