PHP-Script.hu
Kiemelt hirdetés:
2018. augusztus 18. 22:01 szombat, ma Ilona névnap van


grafika


Videóbázis


Kategória: JavaScript, JQuery
DIV oszlopok magassága, megoldás 100% height helyett
2012.01.25. 16:46

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.

DIV oszlopok egyforma magassága
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:

JavaScript meghívása
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ő: userbalazskacom Hozzászólások(0) Hozzászólások Megosztás az iWiW-en Megosztás az Facebook-on Megosztás a Google Reader-ben Megosztás az Twitter-en 

Listázás:  Idő szerint:
Webprogramozás arr Tutorialok info DIV oszlopok magassága, megoldás 100% height helyett

Ebbe a topikba még nem érkezett hozzászólás.

Listázás:  Idő szerint:


© 2006-2018 PHP-Script.hu, Minden jog fenntartva!
Design: Rácz Gergely, Oldalmotor: Rácz Gergely
Impresszum - Oldaltörténet - Oldalszabályzat