Menu icon Foundation
Full height column

Hi !

I just started to play with foundation, and I find this framework very useful.
But I have encountered an issue that I failed to solve.

I would like to build kind of an app layout, with my whole navigation contained in a sidebar on the left. The sidebar would take 100% height with a fixed position. The content would be displayed on the right, and be scrollable, while the sidebar would always remain at the same place.

I tried to create a row that contains everything, and then divide it into 2 columns, one for the sidebar and the other for the content, and giving a 100% height to the first column with no success.

I've heard that kind of layout is not easy to create with foundation ( maybe it's false, I don't know, you'll tell me :) )
and that this issue can be solved using a bit of JS.

I'm currently learning JS but I actually never used it in my projects so if there is a solution to my problem without using JS it would be great !

Thanks for your time !

sidebarfull heightfull height columnmenu

Hi !

I just started to play with foundation, and I find this framework very useful.
But I have encountered an issue that I failed to solve.

I would like to build kind of an app layout, with my whole navigation contained in a sidebar on the left. The sidebar would take 100% height with a fixed position. The content would be displayed on the right, and be scrollable, while the sidebar would always remain at the same place.

I tried to create a row that contains everything, and then divide it into 2 columns, one for the sidebar and the other for the content, and giving a 100% height to the first column with no success.

I've heard that kind of layout is not easy to create with foundation ( maybe it's false, I don't know, you'll tell me :) )
and that this issue can be solved using a bit of JS.

I'm currently learning JS but I actually never used it in my projects so if there is a solution to my problem without using JS it would be great !

Thanks for your time !

Jack Keller over 5 years ago

Generally this is something you solve with JS or filling with content unfortunately. CSS just doesn't have a logical way by itself to handle height: 100%;

Here's a snippet I use from time to time in jQuery with a mix of vanilla JavaScript.

The selectors, jQuery vs $ and etc may differ in your case but this gets you pretty close. I'm certain there are other tricks out there too.

 function updateSidebar() {
    var $width = document.documentElement.clientWidth,
        $height = document.documentElement.clientHeight,
        $main = jQuery('div[role=main]').height();

    if($width > 755) {
        if($main > $height) {
            jQuery('div[role="navigation"]').css({'min-height': $main});
        } else {
            jQuery('div[role="navigation"]').css({'min-height': $height});
        }
    } else {
        jQuery('div[role="navigation"]').removeAttr('style');
    }
}

// then call it on load AND browser resize

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

JCJ80 over 5 years ago

I have had to setup a page similar with a tool bar on the left and a content pane on the right.

There are a number of options you can try, maybe use a table with one row and 2 cells, the left cell with a set width and the table with height set to 100% (the container of the table will also need height 100% see css). The second cell could have overflow scroll/auto.

html, body, form
{
height: 100%;
padding: 0px;
}

In the end i went for 2 divs, the left div with a fixed width and height 100% and the container div absolutely positioned to pin it next to the left hand div and then i used some JS to maintain the appearance I needed, but you could set the second div to be height:100%; and overflow scroll.

Abdallah Ali about 5 years ago

Hi there,

Check this out solution out, It's just CSS

http://codepen.io/abdoz/pen/zxloI