Grow your CSS skills. Land your dream job.

Full Height Sidebar

  • # February 3, 2011 at 6:06 pm

    I know there used to be some faux column hacks that you could use to get full height columns, but I’m not sure that’s what I want. I ended up using some really stupid jQuery to make it work with height: 100% on the sidebar (since you have to have a declared height in order for height: 100% to work).

    $("#holder").height($("#holder").height());

    Is there a better way to do this? Right now it’s up on my test site: http://gigabetz.com/archives/jb11/

    Edit: Also, I really just need the left sidebar to be full height, if it wasn’t obvious. The right one I’m not worried about except clearing the page. I’m also using a really lame
    , but I’ll try to fix that too. Thanks.

    # February 3, 2011 at 6:53 pm

    I don’t have a solution but to be honest I think it looks really good the way you have it.

    # February 3, 2011 at 9:53 pm

    @ChristopherBurton thanks, I actually really like how it looks, but there’s one problem. I’m going to set this up with media queries to be somewhat liquid; so when you resize the window horizontally, the text also reflows causing the size of the holder to resize to fit the content. ie) if you load the page at a wide width and shrink it, the holder should get longer, but doesn’t like this and if you load the page narrow and stretch it, the holder should get shorter.

    # February 3, 2011 at 11:05 pm

    You’re Welcome. Yeah, I know exactly what you’re talking about and a great visual example of this is here

    # February 3, 2011 at 11:36 pm

    @betzster, try this:

    $('#sidebar').height($('#sidebar').siblings('#main-content').height());
    $(window).resize(function(){
    $('#sidebar').height($('#sidebar').siblings('#main-content').height());
    });
    # February 4, 2011 at 12:12 pm

    @jamy_za Thanks. That’s the best that I’ve got so far. I was doing something similar, ut without the .siblings(), but then I also had to set the sidebar height to auto on the resize as well or it would never get any smaller. This works though.

    I can’t believe after all these years of faux columns, there’s no better way to do something like this with css :) Believe me, I’ve looked everywhere. I found one guy doing it with CSS3 gradients with 2 stops on top of each other.

    # February 4, 2011 at 12:13 pm

    BTW, I moved it to http://joshbetz.com/examples/jb11/ so I wouldn’t have to reconfigure typekit when I make the real switch.

    # February 4, 2011 at 7:37 pm

    @betzster yeah it’s crazy that there isn’t an easier way to do it. The css3 gradient would work well if the layout is fixed. A fluid width would cause problems with the gradient I would imagine.

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

You must be logged in to reply to this topic.

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