Enrico: Problem mit Höhenangleichung von 5 nebeneinander liegenden div's

Hallo,

ich möchte 5 nebeneinanderliegende div-Bereiche in Ihrer Höhe am längsten Inhalt entweder des div "Inhalt" oder des div "Sidebar" mittels JavaScript ausgleichen, so dass alle div-Bereiche nach der Aktion die gleiche Höhe haben.

Ich habe hierbei das Script von dieser Seite verwendet und an meine Bedürfnisse angepasst.

Das betroffene HTML-Konstrukt:

  
<div class="Container">  
   <div class="Header"></div>  
   <div class="RibbonOben">Hier kommen ggfs. weitere Informationen rein...</div>  
   <div class="RibbonObenAbschluss"></div>  
   <div class="VorInhalt" id="VorInhalt"></div>  
   <div class="Inhalt" id="Inhalt">Hier werden letztendlich die Inhalte ausgegeben</div>  
   <div class="NachInhaltVorSidebar" id="NachInhaltVorSidebar"></div>  
   <div class="Sidebar" id="Sidebar">  
  
      <?php  
  
         if (isset ($Hauptmenue))  
         {  
            $Datei = $Hauptmenue;  
         }  
  
         if (isset ($Untermenue))  
         {  
            $Datei .= $Hauptmenue . $Untermenue;  
         }  
  
         if (isset ($Untermenue2))  
         {  
            $Datei .= $Hauptmenue . $Untermenue . $Untermenue2;  
         }  
  
         include "../SIDEBAR/" . $Datei . ".php";  
  
      ?>  
  
   </div>  
   <div class="NachSidebar" id="NachSidebar"></div>  
   <div class="Footer" id="Footer">  
      <div class="RibbonUnten">Hier kommt eine Blätterfunktion rein</div>  
      <div class="RibbonUntenAbschluss"></div>  
   </div>  
</div>  

Die css-Definitionen der fünf div-Bereiche sind wie folgt:

  
.VorInhalt  
{  
   background: url(../GRAFIKEN/HomepageVorInhalt.png) repeat-y;  
   left: 0px;  
   position:absolute;  
   top:  287px;  
   width:64px;  
}  
  
.Inhalt  
{  
   background: url(../GRAFIKEN/HomepageInhalt.png) repeat-y;  
   left: 64px;  
   position:absolute;  
   top:  287px;  
   width:579px;  
}  
  
.NachInhaltVorSidebar  
{  
   background: url(../GRAFIKEN/HomepageNachInhaltVorSidebar.png) repeat-y;  
   left: 643px;  
   position:absolute;  
   top:  287px;  
   width:24px;  
}  
  
.Sidebar  
{  
   background: url(../GRAFIKEN/HomepageSidebar.png) repeat-y;  
   left: 667px;  
   position:absolute;  
   top:  287px;  
   width:147px;  
}  

Die oben angesprochene und an meine Bedürfnisse angepasste JavaScript-Datei sieht wie folgt aus:

  
function H()  
{  
   // Alle fünf div-Bereiche referenzieren  
   vi=document.getElementById("VorInhalt");  
   i=document.getElementById("Inhalt");  
   ni=document.getElementById("NachInhaltVorSidebar");  
   s=document.getElementById("Sidebar");  
   ns=document.getElementById("NachSidebar");  
   f4=document.getElementById("Footer");  
  
   // Höhe der div-Bereiche "Inhalt" und "Sidebar" ermitteln  
   ih=i.offsetHeight;  
   sh=s.offsetHeight;  
  
   // Ggfs. border und padding der div-Bereiche "Inhalt" und "Sidebar" ermitteln  
   ibt=C(i,"borderTopWidth");  
   ibb=C(i,"borderBottomWidth");  
   ipt=C(i,"paddingTop");  
   ipb=C(i,"paddingBottom");  
  
   sbt=C(s,"borderTopWidth");  
   sbb=C(s,"borderBottomWidth");  
   spt=C(s,"paddingTop");  
   spb=C(s,"paddingBottom");  
  
   ib=Number(ibt.replace("px",""))+Number(ibb.replace("px",""));  
   ip=Number(ipt.replace("px",""))+Number(ipb.replace("px",""));  
   ie=ib+ip;  
  
   sb=Number(sbt.replace("px",""))+Number(sbb.replace("px",""));  
   sp=Number(spt.replace("px",""))+Number(spb.replace("px",""));  
   se=sb+sp;  
  
   // Längsten Wert ermitteln  
   if(ih>sh)  
   {  
      h=ih-ie;  
   }  
   else  
   {  
      h=sh-se;  
   }  
  
   // Höhe der fünf div-Bereiche angleichen  
   t=h+299+"px"; // Grafik "Header" zzgl. oberem Ribbon zzgl Abschluss oberem Ribbon  
   h+="px";  
   vi.style.height=h;  
   i.style.height=h;  
   ni.style.height=h;  
   s.style.height=h;  
   ns.style.height=h;  
   f4.style.top=t;  
}  
  
function C(e,st)  
{  
   c=null;  
  
   if(typeof e.currentStyle!="undefined")  
   {  
      c=e.currentStyle;  
   }  
   else  
   {  
      c=document.defaultView.getComputedStyle(e,null);  
   }  
  
   return c[st];  
}  

Damit die Angleich-Aktion erst dann ausgeführt wird, wenn die Seite vollständig geladen hat, habe ich diese Funktion unmittelbar vor dem schliessenden </body>-Tag mit eingebunden.

Aber egal, was ich versuche, ob nun über die eben angesprochene Funktion, oder über <body onload="...">, es werden weder die fünf div-Bereiche in ihrer Höhe angeglichen, noch der Footer unterhalb der div-Bereiche positioniert:

Und so sollte es aussehen (hart codiert, um die gewünschte Darstellung zu visualisieren):

Fehlermeldungen bekomme ich keine, d.h. die Scripte per se sind fehlerfrei.

Woran liegt es, dass der Höhenausgleich und die Ausrichtung des Footers nicht wie beasichtigt funktioniert?

Gäbe es ggfs. noch eine bessere Möglichkeit, die Höhen auszugleichen und den Footer zu positionieren?

Vielen Dank für eure Hilfe.

Gruß,
Enrico

  1. Om nah hoo pez nyeetz, Enrico!

    Das ruft

    a) nach semantischem Markup,
      b) nach display: table-cell bzw. display: table für das umgebende Element
      c) künftig vielleicht nach flexbox

    Matthias

    --
    1/z ist kein Blatt Papier.