karl: seiten leiste soll hoch sein wie Inhalt

SELF-Forum

seiten leiste soll hoch sein wie Inhalt

karl
– Informationen zu den Bewertungsregeln

Entschuldigt diese posting. Sicher wurde schon oft geantwortet auf diese Frage. Aber ich weiß nicht wo nach suchen.

Ich habe webseite mit Seitenleiste links und Bereich für Inhalt daneben. In Seitenleiste ist Menüpunkte. Seitenleiste ist blauer Hintergrund. Wenn viel Inhalt da, blaue Seitenleiste geht nicht bis runter.

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"?

Ich bedanken mich
karl

Beitrag melden
–
Informationen zu den Bewertungsregeln

  1. seiten leiste soll hoch sein wie Inhalt

    Matthias Apsel Homepage des Autors
    – Informationen zu den Bewertungsregeln

    Om nah hoo pez nyeetz, karl!

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

    Es gibt viele Möglichkeiten. Zeig die Seite. Wir finden die beste Möglichkeit.

    Matthias

    --
    1/z ist kein Blatt Papier.

    Beitrag melden
    –
    Informationen zu den Bewertungsregeln

  2. 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