Menu icon Foundation
Full height off-canvas?

I'm integrating off-canvas with Foundation 5, attempting to simply have a menu and content that takes the full height of the device, with only scrolling in the content section.

Currently, it seems I cannot tell the menu to take up the full height, which looks weird. If the content in the section is small, then the menu items are clipped with a scroll bar.

I have found a possible fix of putting a div inside each section content with a fixed height. But then this isn't scalable to all devices.

How can I simple have a off-canvas menu with content that is full screen?

off-canvas full height

I'm integrating off-canvas with Foundation 5, attempting to simply have a menu and content that takes the full height of the device, with only scrolling in the content section.

Currently, it seems I cannot tell the menu to take up the full height, which looks weird. If the content in the section is small, then the menu items are clipped with a scroll bar.

I have found a possible fix of putting a div inside each section content with a fixed height. But then this isn't scalable to all devices.

How can I simple have a off-canvas menu with content that is full screen?


Shawn Jones gave the most helpful answer for this post
Shawn Jones almost 6 years ago

I just did this last night. Basically, I wrapped my entire page, header through footer, inside the .inner-wrap, after the aside. (from the basic example in the docs).

I am not finished styling it, but it is at http://beta.kingswaychurch.org

This post has been closed. No new replies can be added.

Dom almost 6 years ago

+1

Vinyl almost 6 years ago

I'd like to see a working solution for this as well.

Some propose adding a wrapper around it and setting the height of all elements (html,body, inner-wrap, outer-wrap, and the added wrapper) to a height of 100%. But this blocks scrolling and on Android devices the menu bar disappears sometimes.

Shawn Jones almost 6 years ago

I just did this last night. Basically, I wrapped my entire page, header through footer, inside the .inner-wrap, after the aside. (from the basic example in the docs).

I am not finished styling it, but it is at http://beta.kingswaychurch.org