编辑：

Question

我正在使用Foundation's off-canvas navigation，尝试制作占据设备全高的导航。

默认情况下，菜单选项的高度由显示的内容的高度决定。这意味着如果您的内容小于菜单项的高度，您的菜单项将不可见。

我希望菜单和内容部分的高度都固定在设备的高度。如果需要，只在内容部分滚动。

将内容区域的高度和最小高度设置为100％似乎没有任何效果 - 仅使用固定高度，例如500px将改变高度 - 但这不可扩展。

这是如何实现的？

如果我给'.inner-wrap'一个固定的高度，整个事情就会调整。我怎样才能确保.inner-wrap占据设备的整个高度？

<div class="off-canvas-wrap">

  <div class="inner-wrap">

    <nav class="tab-bar">

      <section class="left-small">
        <a class="left-off-canvas-toggle menu-icon" ><span></span></a>
      </section>

   </nav>

    <aside class="left-off-canvas-menu">
      <ul class="off-canvas-list">
        <li><label>Label</label></li>
        <li><a href="#">link</a></li>
        <li><a href="#">link</a></li>
        <li><a href="#">link</a></li>

      </ul>
    </aside>

    <section class="main-section">
        <div class="section-inner">
        <p>blah blah</p>
        <p>test</p>
        </div>
    </section>

  <a class="exit-off-canvas"></a>

  </div>

</div>

Answer 1

尝试这是否有效，首先将<div class="off-canvas-wrap">括在另一个div

中

<div class="page">
    <div class="off-canvas-wrap">
        <div class="inner-wrap">
         [..]
        </div>
    </div>
</div>

然后设置以下css，

body,html{
    height:100%;
    width:100%;
}

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

如果要阻止滚动，例如对于聊天客户端，请将.page高度设置为100％。那将是

body,html{
    height:100%;
    width:100%;
}
.off-canvas-wrap,.inner-wrap{
    height:100%;   
}
.page{
    height:100%;   
}

Answer 2

这是我发现的最好的方式，它非常简单而且非hackish 注意：这仅适用于某些css3 浏览器。 Compatible Browsers

Sass版本：

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

CSS版本：

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

编辑：

基金会6网站版

.off-canvas-wrapper-inner, .off-canvas{
  min-height: 100vh;
}

Answer 3

我遇到了同样的问题，这就是我所做的：

我把.off-convas-wrapper，.inner-wrapper放在我的主要内容之外，然后在我体内使用.right（左）-off-canvas-toggle，我的问题就解决了。用这种方式我不再需要内容了。

BTW我把.exit-off-canvas放在主要内容的末尾，关闭内包装标签

Answer 4

我不得不破解JS，我发现根据内容何时高于浏览器/设备高度或者没有推到100％高度存在问题。以下是我建议的修复方法：https://github.com/zurb/foundation/issues/3800

基础5幕外全高设备

4 个答案:

Sass版本：

CSS版本：

编辑：

基金会6网站版