Equal height - javascript
Many people have problems getting the heights of their divs the same length. There are good, valid, ways of doing this with only CSS. This isn't one of them. This uses javascript to find out which div is the longest and then set the others to be the same length as that one.
fixH( )
1
2
3
4
5
6
7
8
9
10
11
This div has 12 paragraphs
1
2
3
This div has 4 paragraphs but it's as long as the other one because of some javascript which makes the shorter div the same length as the longer one.
fixH2( )
1
2
3
1
2
3
4
5
6
7
1
2
3
4
5
javascript
function fixH(one,two) {
if (document.getElementById(one)) {
var lh=document.getElementById(one).offsetHeight;
var rh=document.getElementById(two).offsetHeight;
var nh = Math.max(lh, rh);
document.getElementById(one).style.height=nh+"px";
document.getElementById(two).style.height=nh+"px";
}
}
//this does it for three
function sortNum(a,b) { return b-a}
function fixH2(one,two,three) {
if (document.getElementById(one)) {
var obj=new Array(3);
var option=[one,two,three];
for(var i=0; i<option.length; i++) {
document.getElementById(option[i]).style.height="auto";
obj[i]=document.getElementById(option[i]).offsetHeight;
nh=obj.sort(sortNum);
}
nh1=nh.splice(1,2);
for(var i=0; i<option.length; i++) {
document.getElementById(option[i]).style.height=nh+"px";
}
}
}
//
window.onload=function(){
fixH('leftcolumn','rightcolumn');
fixH2('left','right','centre');
}
CSS
#leftcolumn {
width:300px;
background: red;
text-align:center;
float:left;
}
#rightcolumn {
width:300px;
background: blue;
color:white;
float:right;
text-align:center;
}
#left, #right, #centre {
width:200px;
text-align:center;
}
#left {background:red; float:left;}
#centre {
background:white;
border:1px solid gray;
margin:0 auto;
}
#right {background:blue; color:white; float:right;}
Comments
#1 #2Well handy - thank you! Works without problems that I can find...
Thanks for this!
Now, I'm not a JavaScript programmer, so this may be a dumb question, but can this script be modified to:
1) Ensure that all columns are not only equal length, but also reach the bottom of the screen (if the content doesn't reach), and
2) If another script changes the length of one column (ie: an expanding menu), can this script be re-triggered to compensate for the length change?
I find this helpful.
Thanks, at last I've found a simple solution to my problem. Without having to read a 6 page article!
I've tried about 6 solutions and this is the only one that works! It's also XHTML complaint! Thanks!
Great article! I love beer!
Perfect =D thanks
I LOVE YOU!
jk Thanks
Hi,
very nice solution. It breaks if user uses text resize, because both columns will keep their old fixed size no matter what happens with the text inside. In such case sth. like http://www.hedgerwow.com/360/dhtml/js-onfontresize.html
might help.
thanks but what happens if JS is disabled on your user's site? back to square 1 eh..
i love you men thanks
Many thankx man.
Oh!! Bowing on you! :-)
I had the problem of the non-matching heights for weeks, always pushing it aside at every frustrating failed attempt to fix it... til the end of the website, when I couldn't wait anymore and I thought about JS instead of the damn CSS. Searching I came to your website to finally solving it!
Thanks SO much! :-)
Legend man!
I love you. You nailed it!
I've racked my brain trying to get height:100%; work in css. I couldn't get it to work.
This solution looks great but it fails when the width is a percent. The height of the div fails to expand when the width of the browser is reduced.
Does anyone have a solution for this?
so awesome, works...
thanks so much - its just cool 
Awesome! Thanks for the snippet
this is so cool,
exactly what i was looking for...
Works great for me! Tks for sharing.
Where was this page a couple months ago when I needed it!!
Nice tutorials & examples BonRouge, you get a spot in my bookmarks.