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.
{ 23 comments… read them below or add one }
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.
Here is a much easier solution
http://www.dave-woods.co.uk/?p=144
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.
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.
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.
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
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!
Man, u saved my life, 4 years i tried to find fix 4 this. god bless u
Thank you for this post!
also Jeff Coughlin, thank you to! it helped.
Thanks a lot!!!!!
you saved me.
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.
This is perfect! I modified the code a little bit for my use, but otherwise, it works great!
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.
Thousand thanks to this solution!
awesome
… straight forward, 40 seconds, and poof! problem solved! 
thank you very much!
faux columns work well for these cases…
You are GREAT man, for few years I tried solve this problem, but nothing worked good… for this time, Your script works PERFECTLY
Thanks JcDenton. I’m glad it helped.
4 years later, and this is still helping people! Thank you for this, it was a snap to set up and saved me a lot of time and headaches.
Hi,
The CSS height:100% code didn’t worked if you are adding controls (Div) dynamically inside any other div.
So to achieve this, you have to give 100% height to all the containers of respective div i.e.
if your structure is like this body->div1->div2->div3 and you want to make div3 as 100% height then you need to make div2,div1 and body also to height 100%…
This is a pain in some cases.
i found this jquery solution of 100% height which calculates the document height and makes the div height accordingly at http://www.irtaza.com/scripting/div-100-height-scroll-issue-on-ie-fixed-with-jquery/
Thanks Syed, I’m sure with all the new jQuery stuff things are much easier than they were few years ago (when I wrote this, lol )
The link doesn’t work any longer :S
{ 1 trackback }