Hey guys,

So I did a lot of reading and Googling, and it seems that getting a DIV to fill space vertically using CSS is not a simple task.
I saw various people suggest using bottom: 0; as a way, or even using JavaScript, etc.

However, after trying many of the different solutions, I could not seem to get it working. I'm stuck, and was wondering
if anyone could give me some insight.

The site I am working on right now can be found at: http://www.twff.ca/home.php

If you look at the content box with the white background, as well as the right panel, I want to be able to make those dynamically
fill the page depending on what content I have. Help would be much appreciated.

This post was edited by kumahoshi on May 24 2012 09:41pm

Nvm, after much experimentation, I was able to get it working using display: tables.

Thanks anyways!

gg no re

e. Back when I first started my HTML classes, it took my about 5 seconds to figure out how to do this with some jQuery. You could do it with normal JavaScript, but it takes significantly more code (probably not as many lines, but more typing).

Assuming you have a two column layout, you grab the height of the longer div column, and just use the following code to make them the same heights.



This post was edited by BreakPoint on May 25 2012 12:58pm

body {
height:100%;}
column1{
height:100%;}


the columns must be in something that also has a height defined, in this case itll be ur body

This wouldn't have worked since depending on the page, one column would've been taller than the other and vice versa. It wasn't the other one that was always taller.

As for the height 100% fix. I tried that as well, but it was giving me quite a lot of weird behaviour so I ditched that approach.

you cant set height with percentages
you have define it with a pixel or em number.

not exactly sure what your trying to do.

Sure you can. http://jsfiddle.net/KSbxD/3/
The trick is to define 100% height to html before body.