Почему процентное значение для height не работает, но процентное значение для width делает?
<div id="working"></div>
<div id="not-working"></div>
#working{
width:80%;
height:140px;
background:orange;
}
#not-working{
width:80%;
height:30%;
background:green;
}
Ширина #working заканчивается 80% от области просмотра, но высота #not-working заканчивается 0.
Высота элемента блока по умолчанию равна высоте содержимого блока. Итак, учитывая что-то вроде этого:
<div id="outer">
<div id="inner">
<p>Where is pancakes house?</p>
</div>
</div>
#inner будет расти достаточно высоким, чтобы содержать абзац, а #outer будет расти достаточно высоким, чтобы содержать #inner.
Когда вы указываете высоту или ширину в процентах, это процент по отношению к родительскому элементу. В случае ширины все элементы блока, если не указано иное, столь же широки, как и их родительский, вплоть до <html>; поэтому ширина элемента блока не зависит от его содержимого и говорит, что width: 50% дает четко определенное количество пикселей.
Однако высота элемента блока зависит от его содержимого, если вы не укажете конкретную высоту. Таким образом, существует обратная связь между родительским и дочерним элементами, в отношении высоты и выражением height: 50% не дает четко определенного значения, если вы не нарушаете цикл обратной связи, предоставляя родительскому элементу определенную высоту.
Процентное значение в свойстве height имеет небольшое усложнение, а свойства width и height действительно ведут себя по-разному друг к другу. Позвольте мне взять вас на гастролях по спецификациям.
height свойство:Посмотрим что спецификация CSS Snapshot 2010 говорит о height:
Процент вычисляется относительно высоты генерируемого блока, содержащего блок. Если высота содержащего блока явно не указана (т.е. Зависит от высоты содержимого), и этот элемент не является абсолютно позиционированным, значение вычисляется как "авто". Процентная высота на корневом элементе относительно начального содержащего блока. Примечание. Для абсолютно позиционированных элементов, содержащий блок, основанный на элементе уровня блока, процент вычисляется по отношению к высоте поля заполнения этого элемента.
В порядке, сделайте шаг за шагом:
Процент вычисляется относительно высоты генерируемого блока, содержащего блок.
Что такое содержащий блок? Это немного сложно, но для нормального элемента в по умолчанию static позиция:
ближайший блок контейнера-предка
или на английском языке, его родительский блок. (Хорошо знать, что было бы для позиций fixed и absolute, но я игнорирую это, чтобы этот ответ был коротким.)
Итак, возьмите два примера:
<div id="a" style="width: 100px; height: 200px; background-color: orange">
<div id="aa" style="width: 100px; height: 50%; background-color: blue"></div>
</div>Вам нужно дать ему контейнер с высотой. width использует область просмотра как ширину по умолчанию
Я думаю, вам просто нужно предоставить ему родительский контейнер... даже если высота этого контейнера определена в процентах. Этот шов работает нормально: JSFiddle
html, body {
margin: 0;
padding: 0;
width: 100%;
height: 100%;
}
.wrapper {
width: 100%;
height: 100%;
}
.container {
width: 100%;
height: 50%;
}
Другой вариант - добавить стиль в div
<div style="position: absolute; height:somePercentage%; overflow:auto(or other overflow value)">
//to be scrolled
</div>
И это означает, что элемент расположен относительно ближайшего расположенного предка.
Без содержимого высота не имеет значения для вычисления процента. Однако ширина будет принимать процент от DOM, если ни один из родителей не указан. (Используя ваш пример) Размещение второго div внутри первого div, получило бы результат... пример ниже...
<div id="working">
<div id="not-working"></div>
</div>
Второй div будет составлять 30% от первой высоты div.