Full Height Sidebar

[betzster]

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.

[betzster]

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

[jamygolden]

@betzster, try this:

$('#sidebar').height($('#sidebar').siblings('#main-content').height());

$(window).resize(function(){

$('#sidebar').height($('#sidebar').siblings('#main-content').height());

});

[betzster]

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

[betzster]

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

[jamygolden]

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

[Author]

Posts