css - 如何在IOS9上使页面全高

标签 css responsiveness

Rightblock 在移动设备上不是全高的。在 bootsrap 中,我删除了响应功能,例如 col-md-* 替换为 col-xs-* 在 IOS8 设备上一切正常(通过 browserstack)。左侧 block 具有 height:78vh。如何在 safari 浏览器中使其简单的固定布局和禁用缩放

<div class="wrapcontent">

  <div class="container">
    <div class="row">
      <header id="header"></header>
    </div>
  </div>

  <div id="content" class="content clearfix">
    <div class="col-xs-12">
      <div class="flex-container ng-scope">
        <div class="col-xs-8 leftBlock">...</div>
        <div class="col-xs-4 rightBlock">...</div>
      </div>
    </div>
  </div>

  <div class="container">
    <div class="row">
      <footer id="footer" class="footer clearfix"></footer>
    </div>
  </div>

</div>
.wrapContent {
  overflow: visible!important;
  height: auto!important;
  min-height: 100%;
  margin: 0 auto -71px;
  padding-bottom: 70px;
  background: #323742;
}
.header {
  overflow: visible;
  height: 189px;
}
.col-xs-12 {
  float: left;
}
.flex-container {
  display: -webkit-flex;
  display: -ms-flexbox;
  display: flex;
  overflow: hidden;
  margin-right: -15px;
}
.leftBlock {
  min-height: 78vh;
  float: left;
}
.rightBlock {
  position: relative;
  z-index: 1;
  padding: 0;
  border-left: 1px solid #e5e9ec;
  background: #f6f6fa;
}

enter image description here

最佳答案

需要删除

<meta name="viewport" content="width=device-width, initial-scale=1.0">

关于css - 如何在IOS9上使页面全高,我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/35176395/

相关文章:

html - 如何将容器高度改为容器高度的80%,并保持纵横比?

css - 响应电子邮件

css - 响应 Div 宽度

css -\f应用于css有什么效果?

javascript - 在 JSON 对象的 html 页面上的 ListView 中显示图像和描述

css - 如何在 ANT 任务中将 SASS 文件转换为 CSS 文件?

javascript - (CSS) 如何根据浏览器大小将 Div 定位在浏览器右下角附近?

javascript - 数据表响应式 - 列不可折叠到子行

math - 如何使用 CSS3 围绕 X=0、Y=0 和 Z=0 以外的线旋转元素?