Set column to full height of the page

问题:

I'm attempting to create a column in css that is 100% height of the page. Specificially the left column with the background transparency.

I've tried to make the contain use the overflow: hidden, but it doesn't seem to be working. I know I'm targeting the issue incorrectly and and I think that the header and footer are messing the columns up.

回答1:

You could set the height with javascript ( using jQuery in this case) at page load :

$(function () {

 $('.left_col').height($(document).height());

});

and just in case the user resizes the window :

$(window).resize( function () {

 $('.left_col').height($(document).height());

});

回答2:

For this idea you want to apply the Faux Column technique. This is how a 100% sidebar is done. You have a repeating image that extends to the bottom of the page, making it appear as it is an actual sidebar.