Question

我有一个棘手的问题：只是在iPhone上我的wordpress网站不能平滑滚动。我有一个固定的导航和100％高度的标题图像。到目前为止，我找到了滚动和固定导航的解决方案或图像的100％高度。

以下是侧面：http://web02980.p4.imv.de/

这是代码（只是一个很难的摘要）：

HTML:

<html>
 <body>
  <div class="container-fluid">
   <nav class="navbar navbar-default">
      <!-- some divs, just use bootstrap -->
   </nav>
   <div class="navbar-collapse sidebar" id="bs-example-navbar-collapse-1" aria-expanded="false" >
     <!-- that's the collapsing mobile sidebar with a list of navigation-points -->
   </div>
   <div id="headerBox"> 
     <!-- with a Call-to-Action-Button --> 
   </div>
   <div class="row">
     <! -- the whole content -->
   </div>
   <footer> ... </footer>
  </div> <!-- end of .container-fluid -->
 </body>
</html>

CSS:

html, .container-fluid {
   height: 100%;
}

body {
   width: 100%;
   -webkit-overflow-scrolling: touch;
   height: 100%;
}

.container-fluid {
   overflow-y: scroll;
   min-height: 100%;
 }

.navbar-default { 
   position: fixed;
   z-index: 998;
   top:0;
   left:0;
   width: 100%;
   height: 70px;
 }

#headerBox {
  min-height: 100%;
  height: auto !important; 
  height: 100%;  
  position: relative; /* need this because the sidebar on a mobile view push the headerBox to the right side if you click on the burger-menu-button */
  left: 0;
}

在这种情况下，我的标题高度为100％，但在iPhone上导航不固定。如果我将身体设置在最小高度：100％和高度上的.container-fluid：100％我有一个固定的导航，但看不到标题图像。

iPhone溢出滚动，固定导航和100％高度标题

0 个答案: