100％高度非帆布基金会5

我使用基金会，并在高度：100％有一系列的部分。100％高度非帆布基金会5

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

这与Foundation 5 off-canvas full height of device类似。

我结束了这一点：

All good

After scrolling down to next section

我认为它可以通过在添加位置解决：固定左关帆布菜单，但是这不是加工。

这让我很生气。

来源

2013-12-10 user3085038

把下面的绳子放在你的头上。

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

来源

2014-01-05 04:11:28 chegoon

我能找到到目前为止，最好的办法是添加一对CSS的行：

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

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

虽然这种修复它在大多数情况下，滚动触摸屏设备上是不是100％完美的，每一次你都会得到一个奇怪的场景，浏览器的底部向上拖动。

来源

2014-01-06 01:40:39

到目前为止我找到的最佳解决方案。谢谢。 –

我已经将这个答案与本文结合起来创建了一些在iOS设备上感觉更自然的东西http://css-tricks.com/snippets/css/momentum-scrolling-on-ios-overflow-elements/ –

-1

从我的评论上面附上的代码有误。只要把下面的你的application.js

$(function() { 
     var timer; 

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

来源

2014-01-07 02:59:34 chegoon

这里是更好的答案：它给了两个100％的高度，并允许中心内容滚动。

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

来源

2015-02-26 07:57:52

这是只有在整个互联网上似乎工作的解决方案。荣誉。 – simonmorley

100％高度非帆布基金会5

回答

相关问题