Menu icon Foundation
Foundation 6 - Off Canvas - 100% height

I'm working with off canvas in foundation 6, how can I get the height of the off-canvas (left) menu to take up the full height of the screen when the content of the page is short enough that it does not extend the full height? I've tried setting the menu and all parent tags to a height or min-height of 100%, but that seems to break the 'scroll-to-top' behavior when showing the off-canvas menu.

foundation 6off-canvasFull screen height

I'm working with off canvas in foundation 6, how can I get the height of the off-canvas (left) menu to take up the full height of the screen when the content of the page is short enough that it does not extend the full height? I've tried setting the menu and all parent tags to a height or min-height of 100%, but that seems to break the 'scroll-to-top' behavior when showing the off-canvas menu.

Jacob Button almost 3 years ago

I haven't done extensive testing on other devices yet, but this seems to be working well in chrome so far.

     <script type="text/javascript">
        $(document).ready(function () {
            $(document).foundation();
        });

        $(window)
        .load(function() {
            SetOffCanvasHeight();
        })
        .resize(function() {
            SetOffCanvasHeight();
        });

        function SetOffCanvasHeight() {
            var height = $(window).height();
            var contentHeight = $(".off-canvas-content").height();
            if (contentHeight > height) { height = contentHeight; }

            $(".off-canvas-wrapper").height(height);
            $(".off-canvas-wrapper-inner").height(height);
            $(".off-canvas").height(height);
        } 
    </script> 

Ernest almost 3 years ago

Nice Jacob :)
But i had to add the following to prevent an other vertical scroll-bar to appear:

.off-canvas-content
{
  overflow: hidden;
}

Žiga Šebenik over 2 years ago

It can be done using CSS only.

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