Grow your CSS skills. Land your dream job.

Help to make layout 100% height

  • # May 13, 2013 at 12:03 am

    Hi

    I´m trying to make a simple layout 100% height.

    Apparently the layout seems to be 100% of height but when resizing the browser and open the menu item 10 it is clear that it is not.

    See: [http://codepen.io/adilson/pen/kiHsd](http://codepen.io/adilson/pen/kiHsd “http://codepen.io/adilson/pen/kiHsd”)

    Another problem is that the column border “sidebar” is not going to the bottom of the page.

    Any help is welcome :)

    Thank you!

    # May 13, 2013 at 12:10 am

    CSS –

    html{
    width :100%;
    height:100%;
    }

    setting the html to 100% width and height will do the trick.

    # May 13, 2013 at 12:27 am

    Hi unasAquila

    I added the code and the problem persists. :(

    Also tried using the code below.

    html, body
    {
    width :100%;
    height: 100%;
    }

    Any hint?

    Thank you..

    # May 13, 2013 at 12:45 am

    a Jquery alternative

    if ($(‘#sidebar’).height() < $(document).height()){
    $(‘#sidebar’).css(‘height’, $(document).height()+’px’);
    }

    if ($(‘#content’).height() < $(document).height()){
    $(‘#content’).css(‘height’, $(document).height()+’px’);
    }

    # May 13, 2013 at 12:51 am

    Not work to me :(

    $(document).resize(function() {
    if ($(‘#sidebar’).height() < $(document).height()){
    $(‘#sidebar’).css(‘height’, $(document).height()+’px’);
    }

    if ($(‘#content’).height() < $(document).height()){
    $(‘#content’).css(‘height’, $(document).height()+’px’);
    }
    });

    # May 13, 2013 at 1:07 am

    first

    $(document).resize(function()

    needs to be

    $(window).resize(function()

    the problem here is that it wont be called until the window is re-sized

    it is best to call it in the document ready.

    $(document).ready(function() {

    if ($(‘#sidebar’).height() < $(document).height()){
    $(‘#sidebar’).css(‘height’, $(document).height()+’px’);
    }

    if ($(‘#content’).height() < $(document).height()){
    $(‘#content’).css(‘height’, $(document).height()+’px’);
    }

    initMenus();

    });

    # May 13, 2013 at 1:44 am

    Hi unasAquila

    The page now has more than 100% height :(

    See a image: [Sample Image](http://lh3.googleusercontent.com/-eSlmitl5Woo/UZB8q-V91hI/AAAAAAAAK9w/P-Y-UDOrQWQ/w699-h568-no/Captura+de+tela+inteira+13052013+023915.jpg “Sample Image”)

    And have a small white part in sidebar.. :(

    I appreciate the help you are giving up to now.

    Thank you

    # May 13, 2013 at 2:26 am

    maybe try window

    $(document).ready(function() {

    if ($(‘#sidebar’).height() < $(window).height()){
    $(‘#sidebar’).css(‘height’, $(window).height()+’px’);
    }

    if ($(‘#content’).height() < $(window).height()){
    $(‘#content’).css(‘height’, $(window).height()+’px’);
    }

    initMenus();

    });

    # May 13, 2013 at 6:33 am

    Strangely, the solution to this problem is to use tables (well, display: table). I know, how scandalous. I’ve forked your CodePen [here](http://codepen.io/anon/pen/DivFj “http://codepen.io/anon/pen/DivFj”).

    # May 13, 2013 at 11:55 am

    David, was exactly what I wanted!

    I do not know if it’s possible to do that without using “display: table”, but the solution you presented is the best alternative so far.

    Here’s an example of what I’m trying to do: [Admin Panel](http://www.keenthemes.com/preview/metronic/layout_blank_page.html “Admin Panel”)

    I just do not want the header and footer of this model, but the rest is exactly what I want to do.

    Thank you..

    # May 16, 2013 at 8:10 pm

    David, I make a test using IE10 and the layout is broken, the sidebar is on left but de content is under sidebar not in right of sidebar..

    Forget, the problem is a config in browser..

Viewing 11 posts - 1 through 11 (of 11 total)

You must be logged in to reply to this topic.

*May or may not contain any actual "CSS" or "Tricks".