Question

我使用的是基础，并且在高度上有一系列部分：100％。

我使用非画布菜单，但它只匹配第一部分/视口的高度。因此，一旦我滚动，非画布菜单就不再与视口的高度对齐。

与Foundation 5 off-canvas full height of device类似的问题。

我结束了这个：

All good

After scrolling down to next section

我认为可以通过添加位置来解决：固定到左侧画布菜单，但这不起作用。

这让我很生气。

Answer 1

到目前为止，我能找到的最佳选择是添加几行css：

        .off-canvas-wrap, .inner-wrap {
            min-height: 100%;
        }

        .off-canvas-wrap{  
        height: 100%;
        overflow-y: auto;
        }

虽然这在很大程度上解决了这个问题，但在触摸设备上滚动并不是100％完美，不时会出现一个奇怪的情况，即浏览器的底部向上拖动。

Answer 2

这是更好的答案：它提供100％的高度并允许中心内容滚动。

.off-canvas-wrap, .inner-wrap, .main-section { height:100%; }
.main-section { overflow-y: auto; }

Answer 3

将以下绳索放在头上。

  .off-canvas-wrap,.inner-wrap,.main-section{
      height:100%;   
  }

Answer 4

我评论上面附带的代码有些不对劲。只需将以下内容放入application.js

即可

   $(function() {
         var timer;

         $(window).resize(function() {
            clearTimeout(timer);
            timer = setTimeout(function() {
               $('.inner-wrap').css("min-height", $(window).height() + "px" );
                }, 40);
          }).resize();
     });

100％高度露天基金会5

4 个答案: