How To Extend Sidebar And Content To Full Height Even Without Content

Here is a sample of what I got so far. Click Here In my HTML, I have this :

header here

Solution 1:

If you are ok with jquery than use below code...

$(document).ready(function(){
    var header_height = $('#header').height();
    var content_height = $(window).height() - header_height;
    var container_height = $('#centerRightColumnContainer').height();
    var sidebar_height = $('#sideBarLeft').height();
    if(container_height > sidebar_height)
        var main_height = container_height;
    elsevar main_height = sidebar_height;
    if(content_height > main_height)
        var main_height = content_height;

    $('#centerRightColumnContainer,#sideBarLeft').css('height',main_height);
});

Solution 2:

I would not recommend doing this with JavaScript.

This is a well known problem in web design. You can use a flex to achieve this: fiddle

The wrapper does the magic:

#wrapper { display: flex; }

Flexbox is not supported by old browsers. Read this article.

Share