Foundation 5离线画布充满整个设备的高度

Question

Foundation 5离线画布充满整个设备的高度

htmlcsszurb-foundation

26

我正在使用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>

- willdanceforfun

使用 iscroll 来处理您的内容部分？这样，内容将始终仅占用“设备高度”，并且滚动条将出现（良好的用户界面）在其余部分。同样，也可以对基础菜单执行相同操作。 - Roy M J

我曾经遇到过类似的问题。但是可以通过将<div class="off-canvas-wrap">的整个代码嵌套在另一个高度为100%的div中来轻松解决。同时，记得将body和html的高度设置为100%，以使其正常工作。 - Manu

4个回答

19

我发现这是最好的方法，而且它相当简单易懂，不会有什么奇怪的操作。
注意：这只适用于某些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;
}

- James Harrington

同意。浏览器支持基本上与Foundation 5的兼容性相匹配。 - Joe

1

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

我将 .off-convas-wrapper、.inner-wrapper 和 aside 从我的主要内容中移出，并仅在我的 body 中使用 .right(left)-off-canvas-toggle，我的问题得到了解决。通过这种方式，我不再需要内容。

顺便说一下，在我的主要内容结束之前，我在关闭 inner-wrapper 标记之前放置了 .exit-off-canvas。

- ehsan

4

嗨，ehsan，你能否给我们展示一下你的代码示例吗？谢谢。 - Klian

1

嘿，Ehsan，你能分享一下要点吗？ - robdodson

0

我不得不对JS进行一些修改，我发现如果内容高度超过浏览器/设备高度或者没有推到100%的高度，就会出现问题。这是我的建议修复方法：https://github.com/zurb/foundation/issues/3800

- Larron

网页内容由stack overflow 提供, 点击上面的

可以查看英文原文，
原文链接

- Manu · Accepted Answer

如果这样可以解决问题的话，请先将<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%;   
}