CSS div 100% высота

Question

Я разрабатываю этот website, и я хочу, чтобы правая боковая панель имела высоту 100%.

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

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

Я прочитал много ответа, особенно это (Prestaul ответ): Setting 100% height on an absolutely positioned element when the content expands past the window size.

Но для меня этот трюк не работает, также пример скрипки не работает!

This is the jsfiddle working example.

This is the same code that doesn't work.

Answer 1

попробуйте установить стиль тела к:

body { position:relative;} 

он работал для меня

Answer 2

Установите HTML тегов, тоже. Таким образом, не требуется никаких странных хакеров.

html, body {height: 100%}

Answer 3

У меня есть другое предложение. Если вы хотите myDiv иметь высоту 100%, используйте эти дополнительные 3 атрибуты на вашем DIV:

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

Это должно сделать работу!

Answer 4

Flexbox решение

Примечание: Добавить сгибать префиксов поставщика, если это требуется 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>