问题

I'm using Foundation's off-canvas navigation, attempting to make a navigation that takes up the full height of the device.

By default, the height of the menu options are determined by the height of the content being shown. This means if your content is less than the height of the menu items, your menu items will be invisible.

I would like both the menu, and the height of the content section to be fixed at the height of the device. With only scrolling in the content section if needed.

Setting the height, and min-height of content area to 100% doesn't seem to have any effect - only using a fixed height e.g. 500px will change the height - but then this isn't scalable.

How is this achieved?

If I give '.inner-wrap' a fixed height, the whole thing will adjust. How can I make sure .inner-wrap takes the full height of a device?

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

回答1:

Try if this works, first enclose the <div class="off-canvas-wrap"> in another div

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

And then set the following css,

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

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

If you want to block scrolling, say for a chat client, set .page height to 100%. And that would be

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

回答2:

This is the best way I've found and its pretty simple and non-hackish
NOTE: this only works on some css3 browsers. Compatible Browsers

Sass Version:

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

CSS Version:

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

Edit:

Foundation 6 sites version

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

回答3:

I had the same problems and this is what i've done:

i put .off-convas-wrapper , .inner-wrapper and aside out of my main content and just use .right(left)-off-canvas-toggle inside my body and my problem has solved. with this way i dont need contents anymore.

BTW i put .exit-off-canvas at the end of my main content befor closing inner-wrapper tag

回答4:

I had to hack the JS a bit, I found that depending on when the content is taller than the browser/device height or does not push to 100% height there were issues. Here’s my suggested fix: https://github.com/zurb/foundation/issues/3800

来源：https://stackoverflow.com/questions/20158607/foundation-5-off-canvas-full-height-of-device

标签

html

css

zurb-foundation

Foundation 5 off-canvas full height of device

问题