CSS div 100% высота

Я разрабатываю этот веб-сайт, и я хочу, чтобы правая боковая панель имела высоту 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): Установка высоты 100% на абсолютно позиционируемый элемент, когда содержимое расширяется за размер окна.

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

Это рабочий пример jsfiddle.

Это тот же код, который не работает.

Ответы

Ответ 1

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

body { position:relative;}

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

Ответ 2

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

html, body {height: 100%}

Ответ 3

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

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

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

Ответ 4

Flexbox решение

Примечание. Добавьте префиксы flex flex, если это требуется вашим поддерживаемым браузерам.

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>