Wie kann ich ein div 100% der Fensterhöhe machen?

Ich möchte nur eine sidebar, die werden 100% der Fensterhöhe, aber nichts funktioniert, außer dieser:

#sidebarBack {
background: rgba(20, 20, 20, .3);
position: fixed;
width: 250px;
height: 100%;
left: 0;
}

Möchte ich nicht haben position: fixedweil ich horizontal scrollbaren Inhalt, so dass ein fester Teil bleiben würde, gut, behoben.

Gibt es eine Möglichkeit, so etwas zu tun, vielleicht mit relative oder absolute position?

Hier ist eine schnelle Fiddle gerade für eine Prüfung und Erklärung:
JSFiddle

InformationsquelleAutor der Frage dvlden | 2012-11-28

  1. 35

    tl;dr - add html, body {height:100%;} zu Ihrer CSS.

    Prozentualen Werte in CSS sind geerbt von einigen Vorfahren, die bereits Höhe erklärt. In Ihrem Fall, Sie brauchen, um zu sagen, alle Eltern Ihrer sidebar auf 100% Höhe. Ich gehe davon aus, dass #sidebarBack ist ein direktes Kind der body.

    Im wesentlichen der code oben ist sagen #sidebarBack werden 100% der Höhe des übergeordneten Elements ein. Seine Eltern (nehmen wir an) ist bodyso müssen Sie height: 100%; auf body als gut. Wir können nicht hier stoppen, aber; body erbt Höhe von htmlso dass wir auch müssen height: 100%; auf html. Wir können hier aufhören, weil html erbt seine Eigenschaften aus viewportdie bereits einen deklarierten Höhe von 100%.

    Dies bedeutet auch, wenn Sie zu einer Gefährdung der #sidebar in einem anderen divdann div muss auch height:100%;.

    Hier ist ein Aktualisiert JSFiddle.

    Geändert CSS:

    html, body {
    height:100%;
}

#sidebar {
    background: rgba(20, 20, 20, .3);
    width: 100px;
    height: 100%;
    left: 0;
    float:left;
}

section#settings {
    width:80%;   
    float:left;
    margin-left:100px;
    position:fixed;
}

    InformationsquelleAutor der Antwort Darren

  2. 41

    Können Sie mit der neuen und so-nützlich-ich-kann-nicht-vorstellen-was-hat-W3C-so-lange vh CSS-Einheit:

    height:100vh;

    InformationsquelleAutor der Antwort fyarci

  3. 7

    Zuerst sagen Sie dem body-element zu füllen, das Fenster, anstatt zu schrumpfen auf die Größe des Inhalts:

    body { position: absolute; min-height: 100%; }

    mithilfe min-height statt height Körper erlaubt wird, sich zu erweitern, über das Fenster ist die Höhe, wenn der Inhalt länger ist als das Fenster (d.h. diese können für den vertikalen Bildlauf, wenn erforderlich).

    Nun, setzen Sie Ihre "#sidebar" zu sein position:absoluteund verwenden Sie top:0; bottom:0; zu zwingen, es zu füllen, das übergeordnete element ist der vertikale Raum:

    #sidebar {
    position: absolute;
    top:0; bottom:0;
    left: 0;
    width: 100px;
    background: rgba(20, 20, 20, .3);
}

    Hier sind ein paar jsFiddles:

    Wie Sie sehen werden, in beiden Beispielen habe ich erhalten, Ihre Breite-Einstellung auf der "#Einstellungen" Abschnitt, so zeigt sich, dass horizontale scrollen funktioniert wie gewünscht.

    InformationsquelleAutor der Antwort Lee

  4. 1

    Versuchen Sie die folgenden

    #sidebarBack {
 background: rgba(20, 20, 20, .3);
 position: fixed;
 width: 250px;
 top:0;
 bottom:0;
 left: 0;
}

    InformationsquelleAutor der Antwort Simon West

  5. 0

    Versuchen, diese - 

    html,body{height:100%;}
#sidebar {
background: rgba(20, 20, 20, .3);
/*position: fixed;*/
width: 100px;
height: 100%;
left: 0;
float:left;
}


section#settings {
width: 62%;
height: auto;
display: inline-block;
position: relative;
margin-left: 100px;
float:left;
}

    InformationsquelleAutor der Antwort Mak

Schreibe einen Kommentar