Sitebuildingnél idegesítő, amikor egy több oszplos weboldalt építünk fel és az oszlopok magassága sehogyan sem akar szinkronban lenni, hiába próbálkozunk a "height:100%" megoldással.

Ilyenkor ez a pár soros JavaScript segítséget nyújthat!

Egész egyszerűen használjuk ezt a pár soros JavaScriptet a <head> tagok közé írva.

1
2
3
4
5
6
7
8
9
10
11
12
13

function div_szinkron(){
var main = document.getElementById("main").offsetHeight;
var side = document.getElementById("side").offsetHeight;
 
if (main > side ) {
 document.getElementById("side").style.height = main + "px";
 }
 
if (side > main) {
 document.getElementById("main").style.height = side + "px";
 }
}
 

Használat:

Amelyik oszlophoz viszonyítani szeretnél: <div id="main"> - ez általában a középső szélesebb oszlop

Amelyiket viszonyítani szeretnéd: <div id="side"> - általában a keskeny oszlop jobb vagy bal oldalon

Ha margin vagy paddig tulajdonságokat használsz, lehet, hogy pontosítanod kell a kódban pl.:

document.getElementById("side").style.height = main-15 + "px";

Ekkor a main értékből kivon 15 px-t és ehez viszonyít már!

Hogy működjön a script, meg kell hívnod a következő módon:

1
2

<body onload="div_szinkron()">
 

Ez annyit tesz, hogy a <body> tag betöltődésénél meghívja a funciót.

Saját ötlet alapján:

balazskacom - http://balazska.com programozás

Szerző: balazskacom Hozzászólások(0)