shwups.ch: seiten leiste soll hoch sein wie Inhalt

Beitrag lesen

SELF-Forum

seiten leiste soll hoch sein wie Inhalt

shwups.ch Homepage des Autors
– Informationen zu den Bewertungsregeln

Hallo Karl

Ich haben das
<div id="content" class="grid_20 push_4">...Menü...</div>
<div id="sidebar" class="grid_4 pull_20">...Inhalt...</div>

Wie kriegen höhe von "sidebar" genau so hoch wie "content"?

Wie schon erwähnt gibt es verschiedene Möglichkeiten.

Variante 1:
<html style="height:100%">
  <body style="height:100%">
    <div id="content" style"height:100%">...Menü...</div>
    <div id="sidebar" style"height:100%">...Inhalt...</div>
  </body>
</html>

Variante 2
<div style="display:-webkit-flex; -webkit-flex-flow:row;">
  <div id="content" style="flex:1 1 auto;">...Menü...</div>
  <div id="sidebar" style="flex:1 1 auto;">...Inhalt...</div>
</div>

Variante 3
<div style="display:table">
  <div id="content" style="display:table-cell">...Menü...</div>
  <div id="sidebar" style="display:table-cell">...Inhalt...</div>
</div>

Variante 4
<div style="height:500px">
  <div id="content" style="height:100%">...Menü...</div>
  <div id="sidebar" style="height:100%">...Inhalt...</div>
</div>

Nachteile:
Variante 1:
Bedingt, dass alle Elemente bis zu deinen 2 Elementen die Höhe 100% haben, dies kann zu unerwünschten Nebeneffekten führen.

Variante 2:
Die sauberste Variante funktioniert nur in ganz aktuellen Browsern  mit den entsprechenden Vendor-Prefixen
ie10, safari Syntax abweichend
opera ok
chrome mit mit prefixen
firefox abweichende Syntax

Variante 3:
Ab ie 8, andere Browser ok. Verhält sich wie eine Tabelle => z.B. keine margins möglich

Variante 4
Höhe des Containers um deine 2 Elemente Muss fix sein. Kann allenfalls mit Javascript gesetzt werden.

Gruss shwups-cms.ch

Beitrag melden
–
Informationen zu den Bewertungsregeln