Mi rispondo da solo! Ho avuto modo di spulciare il web e, basandomi su di una guida, mi sono creato il mio script. A me funziona (testato con chrome, fireforx e IE9, nel fine settimana testerò il risultato su opera, safari e ie 7/8).
Ecco il codice utilizzato:
codice:addLoadListener(equalHeight); function equalHeight() { /*Memorizzo riferimento agli id delle posizioni*/ var LeftColumnId = "left"; var MainContentId = "main-content"; var RightColumnId = "right"; var LeftColumn = document.getElementById(LeftColumnId); var MainContent = document.getElementById(MainContentId); var RightColumn = document.getElementById(RightColumnId); /*Calcolo l'altezza dei tre elementi*/ var LeftHeight = LeftColumn.offsetHeight; var MainContentHeight = MainContent.offsetHeight; var RightHeight = RightColumn.offsetHeight; /*Calcolo bordi e padding dei tre elementi (string px)*/ var LeftBorderTopPixels = retrieveComputedStyle(LeftColumn, "borderTopWidth"); var LeftBorderBottomPixels = retrieveComputedStyle(LeftColumn, "borderBottomWidth"); var LeftPaddingTopPixels = retrieveComputedStyle(LeftColumn, "paddingTop"); var LeftPaddingBottomPixels = retrieveComputedStyle(LeftColumn, "paddingBottom"); var MainContentBorderTopPixels = retrieveComputedStyle(MainContent, "borderTopWidth"); var MainContentBorderBottomPixels = retrieveComputedStyle(MainContent, "borderBottomWidth"); var MainContentPaddingTopPixels = retrieveComputedStyle(MainContent, "paddingTop"); var MainContentPaddingBottomPixels = retrieveComputedStyle(MainContent, "paddingBottom"); var RightBorderTopPixels = retrieveComputedStyle(RightColumn, "borderTopWidth"); var RightBorderBottomPixels = retrieveComputedStyle(RightColumn, "borderBottomWidth"); var RightPaddingTopPixels = retrieveComputedStyle(RightColumn, "paddingTop"); var RightPaddingBottomPixels = retrieveComputedStyle(RightColumn, "paddingBottom"); /*Memorizzo il numero dei pixel dei bordi e del padding dei tre elementi*/ var LeftBorderNumber = Number(LeftBorderTopPixels.replace("px", "")) + Number(LeftBorderBottomPixels.replace("px", "")); var LeftPaddingNumber = Number(LeftPaddingTopPixels.replace("px", "")) + Number(LeftPaddingBottomPixels.replace("px", "")); var LeftExtras = LeftBorderNumber + LeftPaddingNumber; var MainContentBorderNumber = Number(MainContentBorderTopPixels.replace("px", "")) + Number(MainContentBorderBottomPixels.replace("px", "")); var MainContentPaddingNumber = Number(MainContentPaddingTopPixels.replace("px", "")) + Number(MainContentPaddingBottomPixels.replace("px", "")); var MainContentExtras = MainContentBorderNumber + MainContentPaddingNumber; var RightBorderNumber = Number(RightBorderTopPixels.replace("px", "")) + Number(RightBorderBottomPixels.replace("px", "")); var RightPaddingNumber = Number(RightPaddingTopPixels.replace("px", "")) + Number(RightPaddingBottomPixels.replace("px", "")); var RightExtras = RightBorderNumber + RightPaddingNumber; /*Calcolo l'altezza maggiore dei tre elementi: */ if (LeftHeight > MainContentHeight){ //Left è più alta di MainContent //Left è più alta anche di Right? if(LeftHeight > RightHeight){ //Left è la più alta MainContent.style.height = (LeftHeight - MainContentExtras) + "px"; //Imposto altezza MainContent RightColumn.style.height = (LeftHeight - RightExtras) + "px"; //Imposto altezza Right } else{ //Right è la più alta LeftColumn.style.height = (RightHeight - LeftExtras) + "px"; //Imposto altezza Left MainContent.style.height = (RightHeight - MainContentExtras) + "px"; //Imposto altezza MainContent } } else{ //MainContent è più alta di Left //MainContent è più alta alta anche di Right? if(MainContentHeight > RightHeight){ //MainContent è la più alta LeftColumn.style.height = (MainContentHeight - LeftExtras) + "px"; //Imposto altezza Left RightColumn.style.height = (MainContentHeight - RightExtras) + "px"; //Imposto altezza Right } else{ //Right è la più alta LeftColumn.style.height = (RightHeight - LeftExtras) + "px"; //Imposto altezza Left MainContent.style.height = (RightHeight - MainContentExtras) + "px"; //Imposto altezza MainContent } } } function retrieveComputedStyle(element, styleProperty){ var computedStyle = null; if (typeof element.currentStyle != "undefined"){ computedStyle = element.currentStyle; } else{ computedStyle = document.defaultView.getComputedStyle(element, null); } return computedStyle[styleProperty]; } function addLoadListener(fn){ if (typeof window.addEventListener != 'undefined'){ window.addEventListener('load', fn, false); } else if (typeof document.addEventListener != 'undefined'){ document.addEventListener('load', fn, false); } else if (typeof window.attachEvent != 'undefined'){ window.attachEvent('onload', fn); } else{ var oldfn = window.onload; if (typeof window.onload != 'function'){ window.onload = fn; } else{ window.onload = function(){ oldfn(); fn(); }; } } }

Rispondi quotando