标签:适配 div lan class btn 安全 content Fix max
<meta name="viewport" content="width=device-width, initial-scale=1, minimum-scale=1, maximum-scale=1, user-scalable=no, viewport-fit=cover">
<div class="bottom-btn-wrap"> //外面包一层 <div class="main_btn2"></div> //这个是按钮 <div class="placeholder-btn"></div> </div>
.PlanBookbxModule .bottom-btn-wrap { position: fixed; left: 0; right: 0; bottom: 0; } .PlanBookbxModule .main_btn, .PlanBookbxModule .main_btn2 { width: 100%; box-sizing: border-box; height: 2.34667rem; padding-bottom: env(safe-area-inset-bottom); background-repeat: no-repeat; background-size: 100% 100%; } //这里是下面安全区 为了不让iphoneX下面的横杠不遮挡按钮或者图片 .PlanBookbxModule .placeholder-btn { height: constant(safe-area-inset-bottom); height: env(safe-area-inset-bottom); background: #fff; }
#root {
padding-top: env(safe-area-inset-top);
padding-right: env(safe-area-inset-right);
padding-bottom: env(safe-area-inset-bottom);
padding-left: env(safe-area-inset-left);
box-sizing: border-box;
}
标签:适配 div lan class btn 安全 content Fix max
原文地址:https://www.cnblogs.com/yangsg/p/12909125.html