position:fixed;實現底層頁面不跟隨浮層模組滾動
阿新 • • 發佈：2019-01-30
程式碼如下：
我試過設定<body>的height為100%，overflow:hidden;很遺憾的是不支援……<span style="font-family:Microsoft YaHei;font-size:14px;"><!DOCTYPE html> <html> <head> <meta charset="UTF-8"> <meta name="viewport" content="width=device-width,initial-scale=0.5,maximum-scale=1.0,user-scalable=0" /> <meta name="apple-mobile-web-app-capable" content="yes"> <meta name="apple-mobile-web-app-status-bar-style" content="black"> <meta name="format-detection" content="telephone=no"> <title></title> <style type="text/css"> *{padding: 0;margin: 0;} html{font-size: 40px;} body{color: #333;font-family: "microsoft yahei";} article{padding: 0 .8rem;margin-top: .5rem;overflow: hidden;} li{list-style: none;float: left;width: 25%;text-align: center;line-height: 1.6;} h2{font-weight: normal;font-size: 42px;text-align: center;} .open-box{font-size: 30px;margin:20px 0;overflow: hidden;} .open-box span{width:260px;height:80px;background: #1BBC9B;color: #fff;text-align: center;line-height: 80px;display: block;margin: 0 auto 30px;} .open-box .box{width: 100%;height: 100%;background: #fff;position: fixed;left: 0;top: 0;line-height: 40px;display: none;overflow: scroll;} .open-box p{padding: 20px 30px;display: table;height: 1px;} .open-box .closed{margin-bottom:30px;} </style> </head> <body> <h1>首頁--底層頁面</h1> <article> <div class="open-box"> <span>點選開啟搜尋頁面</span> <div class="box"> <h2>搜尋頁面--浮層</h2> <div style="height: 15rem;">內容模組div</div> <p>在面向物件的程式語言中，類是對物件的抽象，在類中可以定義物件的屬性和方法的描述；物件是類的例項，類只有被例項化後才能被使用。定義類 在PHP中，使用關鍵字class加類名的方式定義類，然後用大括號包過類體，在類體中定義類的屬性和方法。在面向物件的程式語言中，類是對物件的抽象，在類中可以定義物件的屬性和方法的描述；物件是類的例項，類只有被例項化後才能被使用。定義類 在PHP中，使用關鍵字class加類名的方式定義類，然後用大括號包過類體，在類體中定義類的屬性和方法。</p> <div style="height: 10rem;">內容模組div</div> <span class="closed">關閉搜尋頁面</span> </div> </div> <br> <br> <br> <br> <br> <br> <br> <br> <br> <br> <br> <br> <br> <br> <br> <br> <br> <br> <br> <br> <br> <br> <br> <br> <br> <br> <br> <br> <br> <br> <br> <br> <br> <br> <br> <br> <br> <br> <br> <br> </article> <script src="js/zepto.js" type="text/javascript"></script> <script type="text/javascript"> $(function(){ $(".open-box span").click(function(){ $(this).next(".box").show(300); }); $(".closed").click(function(){ $(this).parent().hide(300); }); }) </script> </body> </html> </span>