基础5幕外全高设备

Question

我正在使用Foundation的离场导航,尝试进行占据设备全高度的导航.

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

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

将内容区域的高度和最小高度设置为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浏览器.兼容的浏览器

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;
}