CSS div 100% Höhe

Question

Ich entwickle diese website und ich möchte die rechte Seitenleiste 100% Höhe haben.

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

mydiv { 
    height: 100%; 
    min-height: 100%; 
    position: absolute; 
    top: 0; 
    right: 0; 
    bottom: 0; 
    width: 290px; 
} 

Ich habe eine Menge Antwort lesen, vor allem diese (Prestaul Antwort): Setting 100% height on an absolutely positioned element when the content expands past the window size.

Aber für mich funktioniert dieser Trick nicht, auch das Geigenbeispiel funktioniert nicht!

This is the jsfiddle working example.

This is the same code that doesn't work.

Answer 1

versuchen, den Körper Stil zu setzen:

body { position:relative;} 

es für mich gearbeitet

Answer 2

den HTML-Tag Set auch. Auf diese Weise werden keine seltsamen Positions-Hacks benötigt.

html, body {height: 100%}

Answer 3

ich einen anderen Vorschlag haben. Wenn Sie myDiv wollen eine Höhe von 100% haben, um diese zusätzlichen drei Attribute auf Ihrem div verwenden:

myDiv { 
    min-height: 100%; 
    overflow-y: hidden; 
    position: relative; 
} 

, die den Job tun sollen!

Answer 4

Flexbox Lösung

Hinweis: hinzufügen flex Anbieter Präfixe, wenn sie von Ihrem supported browsers erforderlich.

html { 
 
    height: 100%; 
 
} 
 

 
body { 
 
    height: 100%; 
 
    display: flex; 
 
} 
 

 
.Content { 
 
    flex-grow: 1; 
 
} 
 

 
.Sidebar { 
 
    width: 290px; 
 
    flex-shrink: 0; 
 
}

<div class="Content" style="background:#bed">Content</div> 
 
<div class="Sidebar" style="background:#8cc">Sidebar</div>