Grow your CSS skills. Land your dream job.

Make Sidebar Height 100%

  • # November 29, 2012 at 3:22 pm

    So, I’m trying to work something out. I’m trying to make it so my sidebar’s height is 100%, in that it extends all the way to bottom of the page. Now, I’ve set html and body to height: 100%; so you’d think it would work, but it doesn’t.

    I’ve set up a pen here: http://codepen.io/anon/pen/jJoid

    Note: It extends to whatever size I drag the browser out, but when I scroll down the sidebar cuts off. It’s only ever as big as the browser, but not the page.

    # November 29, 2012 at 7:54 pm

    not sure if I understand what you want. You want side bar to always be the height of the article content height? http://codepen.io/anon/pen/Kaysi

    # November 29, 2012 at 8:13 pm

    @jurotek Perfecto! I owe you a beer! Thanks dude!!!

    # November 29, 2012 at 9:20 pm

    Just keep in mind that using position: absolute; is an awkward hack that removes the sidebar from the natural flow of the document. You might notice this if the sidebar is ever taller than the content; the layout won’t adjust to accommodate, instead chopping of the sidebar where the content finishes.

    # November 29, 2012 at 9:47 pm

    @josh, that is true,
    @realph; you should look up better solution by Googling equal height column layouts

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

You must be logged in to reply to this topic.

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