2 div-Container -> Höhe von Nr. 2 soll sich anpassen?

  • Themenstarter Themenstarter offset
  • Beginndatum Beginndatum
Status
Nicht offen für weitere Antworten.
O

offset

Hallo,

ich habe ein 2-Spalten-Layout mit Header und Footer (siehe Anhang).
Nun möchte ich, dass sich die Höhe vom Menü-Div variabel an die Höhe des Content-Div anspasst.
Aufteilung ist folgende:
PHP: 
    <body>

        <div id="container">

            <div id="header">{header}</div>

            <div id="navigation">{navigation}</div>

            <div id="main">

                <div id="content">{content}</div>

                <div id="infobox">{menu}</div>

            </div>

            <div id="footer">{footer}</div>

        </div>

    </body>

D.h. im <div id="content"> steht ein variabler Inhalt. Dadurch wird die Höhe des Containers verändert. Jetzt soll der infobox-Container genau die gleiche Höhe haben. Leider klappt es bei mir nicht. Entweder setzt sich der "content"-Container über den Footer (Firefox) oder sie einfach nicht die gleiche Höhe (Opera, IE).
Kann mir jemand helfen?
Danke im Voraus.
MfG
 

Anhänge

  • tutorials.gif
    tutorials.gif
    4,7 KB · Aufrufe: 208
höhe anpassen ist leider nur mittels javascript möglich.

zuerst muss die höhe des divs mit dem dynamischen content ausgelesen werden:

var dynheight = document.getElementById("dyndiv").offsetHeight;

dann muss der navi die gleiche höhe zugewiesen werden

document.getElementById("navidiv").style.height = dynheight;

dieses wird aber nur in neuen browsern funktionieren.
vielleicht wäre hier ne table der einfachere weg ...

<edit>
die höhe des content-divs muss dabei auf 'height: auto' stehen
</edit>

:) Mogler
 
Zuletzt bearbeitet:
Hallo,

danke für deine Antwort. Geht es wirklich nur mit JavaScript? Das wäre wirklich schade, denn ich bin nicht gerade ein Fan von JS und habe es auch immer aus. Ich dachte, dass könnte man irgendwie mit CSS lösen. Hatte noch folgendes probiert:
PHP: 
#main {
  overflow: auto;
  width: 100%;
}

#content {
  float: left;
  height: 100%;
  width: 410px;
}

#infobox  {
  float: right;
  height: 100%;
  width: 160px;
}
(unwichtige Sachen wurden entfernt)
Leider passt sich die Höhe der InfoBox nicht an.
:(
 
hatte auch mal dieses problem .... width: 100% geht leider nicht.
javascript ist die einzige lösung (wenns denn divs sein müssen ;) )

:) Mogler
 
nicht ganz richtig. man kann zumindest im IE ein conditional comment einbinden und javascript in den css code einfügen....

Code: 
height: expression(content.offsetHeight);

z.b....
 
Status
Nicht offen für weitere Antworten.

Neue Beiträge

Zurück