Как я могу сделать div 100% высоты окна?

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

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

Я не хочу иметь position: fixed, потому что у меня есть прокручиваемый по горизонтали контент, поэтому фиксированная часть останется, ну, исправлена.

Есть ли способ сделать такое, возможно, с relative или absolute позицией?

Здесь быстрый скрипт только для теста и объяснения: JSFiddle

Ответы

Ответ 1

tl; dr - добавьте html, body {height:100%;} в ваш CSS.

Процентные значения в CSS наследуются от какого-то предка, у которого уже объявлен рост. В вашем случае вам нужно указать всем родителям боковой панели высоту 100%. Я предполагаю, что #sidebarBack является прямым дочерним элементом body.

По существу, ваш код выше сообщает #sidebarBack о 100% -ной высоте своего родителя. Его родительский элемент (мы предполагаем) body, поэтому вам нужно установить height: 100%; на body. Однако мы не можем остановиться; body наследует высоту от html, поэтому нам также нужно установить height: 100%; на html. Мы можем остановиться здесь, потому что html наследует свои свойства от viewport, который уже имеет объявленную высоту 100%.

Это также означает, что если вы вставляете #sidebar внутрь другого div, тогда для div также требуется height:100%;.

Вот Обновленный JSFiddle.

Изменен ваш 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;
}

Ответ 2

Вы можете использовать новый и так полезный-I-can't-imagine-what-take-W3C-so-long vh Единица CSS:

height:100vh;

Ответ 3

Сначала сообщите элементу body заполнить окно, а не уменьшаться до размера содержимого:

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

используя min-height вместо height, телу будет разрешено расширяться за пределы высоты окна, когда содержимое больше, чем окно (т.е. это позволяет вертикальную прокрутку, когда это необходимо).

Теперь установите "#sidebar" как position:absolute и используйте top:0; bottom:0;, чтобы заставить его заполнить вертикальное пространство родительского элемента:

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

Вот пара jsFiddles:

Как вы увидите, в обоих примерах я сохранил настройку ширины в разделе "#settings", тем самым показывая, что горизонтальная прокрутка работает по вашему желанию.

Ответ 4

Попробуйте выполнить

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

Ответ 5

Попробуйте это -

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;
}