Last month for the first time, I designed a website with CSS and DIV. Supposedly CSS and DIV designs are the future of web design. Anyways, design went well and I was actually very happy to switch to DIV and CSS (from using tables before)…
Everything went well, except one thing and that was getting the Left Menu and my Main Content to have the same height. They had different background colors, so it was very obvious when they didn’t have the same height…
My design was such that both Main-Content (main) and Left Navigation (nav-one) were in a wrapper. So I couldn’t figure out why a simple height:100% wouldn’t work (I still don’t).
But I looked around for a good one month (on Google, Forums, books, …). None of the solutions seemed to fix the problem correctly and put out a design that would work in all browsers. The closest fix was to give “Wrapper” a background the same color as the Main Content and Left Menu (and Main Content and Left Menu would have to have the same background color). Then the height difference wouldn’t show up. It was more of a trick fix than solving the problem from its roots…
I finally found the answer on the DP forums. Member “ccoonen” gave me what I had been looking for: A javascript that figures out the height of Main Content and the Left Menu (when the body loads), then the height of whichever is taller, will be applied to the height of the other one. Seems simple, but took me a while to find it…As far as I’ve checked it (in different browsers) this works perfectly. Here is the javascript code to use:
Since WordPress is worthless when trying to post codes, I put the codes in an external file. Check it out over Here: CSS Height Problem Fixed with Javascript.
Just Remember change the “main” and “nav-one” to your own DIV names.
October 16th, 2007 at 4:06 pm
Thanks so much — it worked perfectly! I’ve been trying for several days now to nail down this problem. It never occurred to me to use JS to beat it into submission.
January 22nd, 2008 at 3:15 am
Here is a much easier solution
http://www.dave-woods.co.uk/?p=144
August 3rd, 2008 at 1:58 am
thank you thank you thank you.
had the same problems.
ended up tweaking the “-800″ value.
thank you so much for writing this.
none of the others, including the one posted above, has helped.
December 2nd, 2008 at 4:04 am
Bravo. I had a 3 column layout so I reversed the logic, tested column 1 (nav) first, then column 3 (right column) against the main column, setting the main column height if either are greater than it. In my new logic, if column 1 is > column 2 then column 2 is resized, if column 3 is greater then it’s resized again, otherwise it stays the same. You also have additional code in your onload function which doesn’t pertain to this specific problem, FYI.
December 10th, 2008 at 8:29 pm
Nice solution (thanks). The second javascript method is not needed of course (it’s obviously for another custom usage on the author’s website) and others may want to remove both instances of the string “-800″ (another custom use).
But one thing you might want to change for everyone is the window.onload (it won’t work in all browsers the way it currently is written).
Might I suggest the following change:
window.onload = function() { allocateSidebarHeight(); }
Thanks again. I hadn’t thought to use javascript.
January 30th, 2009 at 2:50 pm
Isn’t JS a trick fix as well!? Can’t you fix it with CSS isself by adding:
float: left;
clear: both;
…or something?
I’m trying to fix slightly similar problem, but I’m not going to mix JS with this. It just complicates things, because so many people have their JS disabled.
TM
February 3rd, 2009 at 2:06 pm
This allowed me to solve an issue on a wordpress template design I am on currently – I have been racking my brain to fix the very problem you described – setting the containers and content div’s to height:100% did nothing! Thanks for the code!
April 3rd, 2009 at 9:12 am
[...] Many thanks and reference to: http://www.nimaheydarian.com/2007/01/css-div-100-height-problem-solved/ [...]
May 9th, 2009 at 10:59 pm
Man, u saved my life, 4 years i tried to find fix 4 this. god bless u
July 30th, 2009 at 8:26 pm
Thank you for this post!
also Jeff Coughlin, thank you to! it helped.
October 26th, 2009 at 3:43 pm
Thanks a lot!!!!!
you saved me.
December 14th, 2009 at 8:31 pm
Thanks for this solution, although I must admit I’m also a bit disappointed that JavaScript seems to be the only solution. I’m very reluctant to use JS, for whatever reason. As I currently only have to use it to vertically position some elements in a column, I can bear it – users without JS will just have all items racked up at the top.
I’m not sure whether to call this a bug or an oversight in the CSS specification, but it is clearly a deep flaw. None of the hacks to solve this extremely simple layout problem are satisfying and really solve the problem itself. The only real way is to revert to table layouts, but that’s not really nice either. I heard CSS3 will address this issue, but it will probably be decades before we can stop writing hacks for people with non-CSS3 browsers.
December 24th, 2009 at 12:34 pm
This is perfect! I modified the code a little bit for my use, but otherwise, it works great!
January 25th, 2010 at 7:42 am
Really, I think this may be perfect solution for the 100% height, several times I had to face this
problam but now I am ok with it..
cheersssssssssss.
June 9th, 2010 at 2:04 am
Thousand thanks to this solution!
June 17th, 2010 at 8:55 am
awesome
… straight forward, 40 seconds, and poof! problem solved! 
thank you very much!