Get a free trial // 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).


    Is there a better way to do this? Right now it’s up on my test site:

    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:

    # 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 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.

There's a whole bunch of content on CSS-Tricks.

Search for Stuff   •   Browse the Archives

Get the Newsletter ... or get the RSS feed