26

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>
willdanceforfun
  • 11,044
  • 31
  • 82
  • 122
  • Using `iscroll` for your content part? So that the content will always take only the `device height` and scroll will be there(good ui) for the rest. And the same can be done for your foundation menu as well.. – Roy M J Nov 23 '13 at 04:42
  • I had a similar issue.. But it can easily be solved by enclosing the whole code of `
    ` in another div, with height 100%. Also remember to set height of body,html as 100% for this to work
     – Manu Nov 23 '13 at 19:22

4 Answers4

31

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%;   
}
Manu
  • 728
  • 7
  • 12
  • 4
    This code blocks scrolling, since wrapping page into off-canvas-wrap applies overflow: hidden. is there nay solution to this? – Ilya Cherevkov Nov 28 '13 at 12:24
  • 7
    Did not work for me (menu was still not 100% height). What worked was: `html, body, body > .page, .off-canvas-wrap { height:100%; } .off-canvas-wrap { overflow-y: scroll; } .inner-wrap { min-height: 100%; }` – Florian Feb 03 '14 at 15:25
  • @Florian: You save my day! – Phương Nguyễn Feb 18 '14 at 12:58
  • 4
    A better solution with scrollbar and off-canvas full-height : http://stackoverflow.com/a/20941659/2274530 – mpgn Jun 05 '14 at 15:28
  • @Florian - your answer is perfect except overflow-y: auto would be better. that way scroll will show only if needed. – Guy Feb 10 '15 at 19:19
19

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;
}
Community
  • 1
  • 1
James Harrington
  • 3,138
  • 30
  • 32
  • agreed. Browser support basically matches Foundation 5's compatibility anyways. – Joe Jul 24 '15 at 06:43
1

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

ehsan
  • 19
  • 2
0

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

Larron
  • 1