CSS div 100% wysokość

Question

Pracuję nad tym website i chcę, aby prawy pasek boczny miał 100% wysokości.

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

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

Czytałem wiele odpowiedzi, szczególnie ten (Prestaul odpowiedź): Setting 100% height on an absolutely positioned element when the content expands past the window size.

Ale dla mnie ta sztuczka nie działa, także przykładowa skrzypaczka nie działa!

This is the jsfiddle working example.

This is the same code that doesn't work.

Answer 1

spróbuj ustawić styl ciała do:

body { position:relative;} 

pracował dla mnie

Answer 2

Ustaw znacznik HTML, zbyt. W ten sposób nie są wymagane żadne dziwne sztuczki pozycyjne.

html, body {height: 100%}

Answer 3

mam inną propozycję. Gdy chcesz myDiv mieć wysokość 100%, korzystać z tych dodatkowych 3 atrybuty na div:

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

To powinno załatwić sprawę!

Answer 4

schematu flexbox rozwiązanie

Uwaga: Dodaj flex prefiksy dostawców, jeśli wymagane przez supported browsers.

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>