willdanceforfun willdanceforfun - 5 months ago 37
CSS Question

Foundation 5 off-canvas full height of device

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>

Answer

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