Es kommt immer wieder vor, dass man beim Programmieren von Webseiten 2 div Container nebeneinander stehen hat. Nehmen wir doch mal eine klassische HTML-Webseite. Dort ist zu Beispiel der Linke div Container für den Inhalt verantwortlich und der rechte div Container für das Menü.
Nun kommt es jedoch bei kurzen, oder langen Beiträgen (auf der linken Seite) vor, dass die Höhe beider div Container nicht gleich sind und dementsprechend auch die Hintergrundfarbe (oder die Grafik) nicht auf einen gleichen Nenner gebracht werden.
Man kann diese Problematik mit einem kleinen Java-Script lösen:
<script type="text/javascript">
function equalize() {
var left=document.getElementById('left');
var right=document.getElementById('right');if(right.offsetHeight>left.offsetHeight) {
left.style.height=right.offsetHeight+"px";
}
else {
right.style.height=left.offsetHeight+"px";
}
}
onload=equalize;
</script>
Dieses Script sollte nun im Header-Tag eingebunden werden. Handelt es sich um eine statischen HTML Webauftritt, so muss das Script auf jeder Seite eingebunden werden. Bei einen CMS oder Blogsystem wie WordPress genügt es natürlich, dass Script nur einmal in den Header-Tag einzufügen. Die IDs müssen den IDs der beiden div Container angepasst werden. Somit sollte es funktionieren.
Christian antwortete am 08. Juli 2011 um 17:22
Hallo, habs getestet. Funktioniert leider nicht. Es passiert leider gar nichts
Johannes Sebald antwortete am 08. Juli 2011 um 19:18
Hallo Christian, vielen Dank für dein Kommentar. Hast du die IDs der DIV-Container angepasst? Wo hast du das Script eingebunden?
Christian antwortete am 30. August 2011 um 19:48
Hallo Johannes, sorry für die späte Antwort. Ja, ich hab die IDs angepasst. Hier hast Du mal den Code. Der css Code ist ausgelagert und verlinkt, den JS Code hab ich direkt ins Dokument geschrieben.
var left = document.getElementById("menue");
var right = document.getElementById("text");
if(left.offsetHeight > right.offsetHeight)
{
right.style.height = left.offsetHeight+"px";
}
Johannes Sebald antwortete am 30. August 2011 um 20:36
Hallo Christian, dass kann auch nicht funktionieren. Da du wie ich deinem CSS entnehmen kann, deine DIV-Container mit Klassen in deiner HTML oder PHP deklariert hast. Dies ist leider falsch, da das Script die IDs der DIV-Container ausliest.
Das nun das JS-Script dennoch funktioniert musst du deine DIVs so anpassen:
Dein CSS musst du ebenfalls anpassen:
Schreib doch bitte eine Antwort, ob dann das Script funktioniert.
Christian antwortete am 31. August 2011 um 01:35
Hallo Christian, dass kann auch nicht funktionieren. Da du wie ich deinem CSS entnehmen kann, deine DIV-Container mit Klassen in deiner HTML oder PHP deklariert hast.
Hallo Johannes,
ich hab die div container mit class=”menue” und id=”menue” deklariert (auch bei text so). Leider wurde der html-quelltext im Kommentar interpretiert – ich setz den morgen nochmal auskommentiert ein da ich jetzt auf dem Laptop arbeite.
Dies ist leider falsch, da das Script die IDs der DIV-Container ausliest.
Also wie gesagt die ID ist angegeben. Allerdings werde ich die css noch ändern von class (.) auf id (#) und es dann nochmal ausprobieren.
Bis morgen und vielen Dank schon mal für die Hilfe und die investierte Zeit.
Wünsche Dir eine gute Nacht.
vg
Christian
Christian antwortete am 31. August 2011 um 11:25
Hallo Johannes,
auch wenn ich die html und css-Datei anpasse passiert nichts. Dieses Ergebnis habe ich aber erwartet da wie gesagt beides von mir angegeben wurde, class und id.
Hier nun der Quelltext der HTML noch dazu.
<script type="text/javascript">var left = document.getElementById("menue");
var right = document.getElementById("text");
if(left.offsetHeight > right.offsetHeight)
{
right.style.height = left.offsetHeight+"px";
}
</script>
Johannes Sebald antwortete am 31. August 2011 um 18:16
Du hast recht, das Script funktioniert so nicht. Habe es deshalb nochmals ausführlich mit dem Adobe Dreamweaver CS5.5 getestet und erweitert. Habe den Artikel dementsprechend geändert. Bitte entnehme das neue Script dem Artikel! Nun müsste es gehen. Schreibe doch zurück, ob es geklappt hat. Danke.
Christian antwortete am 01. September 2011 um 12:33
Hi Johannes,
also ich will gleich vorausschicken dass das Script jetzt funktioniert. Habs mit Internet Explorer 9.0.8112.16421, Firefox 6.0.1 und Opera 11.50 getestet.
Allerdings hatte ich noch ein paar Probleme und Hinweise für die, die das gleiche Problem haben.
1.Das onload-Tag gehört in den body-Tag (siehe Quelltext weiter unten)
2. Das Script veränderte die Höhe zwar, aber nicht gleich für beide Container. Ich hatte bei allen drei Browsern das Problem dass die Seite, die eigentlich kürzer war jetzt zu lang war. Mit den auskommentierten alert´s (siehe Quelltext) hab ich rausgefunden dass es sich genau um 20px handelt. Woher die 20px kamen hab ich versucht rauszufinden und hab die margin (2x 10px Außenabstand) rausgenommen. Der Fehler blieb aber trotzdem.
Dieses Problem hab ich gelöst indem ich bei der If-Bedingung noch -20 eingetragen habe. Jetzt funktioniert es 100%ig.
Ich hoffe Du hast nichts dagegen dass ich den Quelltext hier poste. Den css Teil hab ich in die gleiche Datei mit aufgenommen so hat jeder alles erforderliche.
Auf jeden Fall danke ich Dir nochmal für Deine investierte Arbeitszeit und Geduld. Ich hab jetzt auch eine andere Mailadresse angegeben – unter der lese ich die Mail sicher. Also vielleicht kann ich Dir auch mal helfen, dann melde Dich einfach.
Hier noch der Quelltext…
<script type="text/javascript">function equalize()
{
var left=document.getElementById('menue');
var right=document.getElementById('text');
//alert ("Hoehe des linken Containers " + left.offsetHeight);
//alert ("Hoehe des rechten Containers " + right.offsetHeight);
if(right.offsetHeight>left.offsetHeight)
{
left.style.height=right.offsetHeight-20+"px";
//alert ("Linke Hoehe wenn der Text-Container hoeher ist " + left.offsetHeight);
//alert ("Rechte Hoehe wenn der Text-Container hoeher ist " + right.offsetHeight);
}
else
{
right.style.height=left.offsetHeight-20+"px";
//alert ("Linke Hoehe wenn der Menue-Container hoeher ist " + left.offsetHeight);
//alert ("Rechte Hoehe wenn der Menue-Container hoeher ist " + right.offsetHeight);
}
}
//onload=equalize();
</script>
</head>
<body onload="equalize();">
</body>
</html>
Christian antwortete am 01. September 2011 um 12:52
Für alle die sich das Script anschauen oder runterladen wollen hier noch ein kostenloser Link:
http://www.informatik-it.de/scripte/gleiche-hoehe-div/
Übrigens die css Eigenschaft border-radius wird von allen genannten Browsern unterstützt – nur der Server wo das Beispiel gehostet ist unterstützt CSS3 nicht. Falls Jemand runde Ecken will muss er das mit Grafiken machen oder auf einem Server der CSS3 unterstützt.
Johannes Sebald antwortete am 01. September 2011 um 18:40
1. Zum Thema des Java-Script: Ich habe das Script in allen aktuellen Browser getestet und konnte keinerlei Fehler wegen der 20px feststellen. Das Script sollte komplett in den Header-Bereich eingefügt werden.
2. Zum Off-Topic-Thema CSS3: Ich habe deine Seite auch ebenfalls in allen aktuellen Browsern getestet, und die Funktion “border-radius” funktioniert tadellos. CSS-EIgenschaften können nicht vom Server-Betrieb abhängen. Tipp: Lösche deinen kompletten Browser-Cache.
3. In welchen Bezug hast du den mit Informatik zu tun, falls ich fragen darf? Ich habe den Eindruck, dass du in Sachen Web-Programmierung noch ein rechter Neuling bist. Falls ja, kann ich dich gerne auch auf die Einstiegseite Self-HTML verweisen. Zur besseren Übersicht des Artikels habe ich deinen Quellcode aus den Kommentaren auf das wesentliche gekürzt.