Edit in JSFiddle

$(document).ready(function () {
    $(document).foundation();
    $(".inner-wrap, .left-off-canvas-menu, .main-section").height($(window).height() - $(".fixed").height());
})

<div class="off-canvas-wrap">
    <div class="inner-wrap">
        <div class="fixed">
            <nav class="tab-bar top-bar">
                <section class="left-small"> <a class="left-off-canvas-toggle menu-icon"><span></span></a>

                </section>
                <section class="middle tab-bar-section">
                     <h1 class="title">Foundation</h1>

                </section>
                <section class="right-small"></section>
            </nav>
        </div>
        <aside class="left-off-canvas-menu">
            <ul class="off-canvas-list">
                <li>
                    <label>Foundation</label>
                </li>
                <li><a href="#">The Psychohistorians</a>

                </li>
            </ul>
        </aside>
        <section class="main-section">Content</section> <a class="exit-off-canvas"></a>

    </div>
</div>
<script src="http://cdnjs.cloudflare.com/ajax/libs/jquery/2.0.3/jquery.min.js"></script>
<script src="http://cdnjs.cloudflare.com/ajax/libs/foundation/5.0.2/js/foundation.min.js"></script>

body {
    margin-top: 2.8125rem;
}
.fixed, .left-off-canvas-menu {
    z-index: 1003;
}
.move-right .left-off-canvas-menu {
    -webkit-transform: translate3d(0, 0, 0);
    transform: translate3d(0, 0, 0);
    left: 0;
}
.left-off-canvas-menu {
    -webkit-transform: translate3d(-100%, 0, 0);
    transform: translate3d(-100%, 0, 0);
    left: -100%;
    -webkit-transition: 0.5s;
    transition: 0.5s;
}
.move-right>.inner-wrap {
    -webkit-transform: none;
    transform: none;
}
.move-right a.exit-off-canvas {
    -webkit-transition: none;
    transition: none;
}