CSS - почему не работает процентный рост?

Почему процентное значение для 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.

+168
источник поделиться
6 ответов

Высота элемента блока по умолчанию равна высоте содержимого блока. Итак, учитывая что-то вроде этого:

<div id="outer">
    <div id="inner">
        <p>Where is pancakes house?</p>
    </div>
</div>

#inner будет расти достаточно высоким, чтобы содержать абзац, а #outer будет расти достаточно высоким, чтобы содержать #inner.

Когда вы указываете высоту или ширину в процентах, это процент по отношению к родительскому элементу. В случае ширины все элементы блока, если не указано иное, столь же широки, как и их родительский, вплоть до <html>; поэтому ширина элемента блока не зависит от его содержимого и говорит, что width: 50% дает четко определенное количество пикселей.

Однако высота элемента блока зависит от его содержимого, если вы не укажете конкретную высоту. Таким образом, существует обратная связь между родительским и дочерним элементами, в отношении высоты и выражением height: 50% не дает четко определенного значения, если вы не нарушаете цикл обратной связи, предоставляя родительскому элементу определенную высоту.

+270
источник

Процентное значение в свойстве 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>

<div   id="b"  style="width: 100px;              background-color: orange">
  <div id="bb" style="width: 100px; height: 50%; background-color: blue"></div>
</div>

В этом примере содержащий блок #aa равен #a и т.д. для #b и #bb. Пока что так хорошо.

Следующее предложение спецификации для height - это сложность, о которой я упоминал во введении к этому ответу:

Если высота содержащего блока явно не указана (т.е. зависит от высоты содержимого), и этот элемент не является абсолютно позиционированным, значение вычисляет значение 'auto'.

Ага! Является ли высота содержащего блока явно заданной!

  • 50% height:200px составляет 100 пикселей в случае #aa
  • Но 50% height:auto составляет auto, что равно 0px в случае #bb, поскольку для auto нет содержимого для расширения до

Как говорит спецификация, также важно, был ли сохраненный блок абсолютно позиционирован или нет, но перейдите к width.

width свойство:

Так работает ли это так же для width? Давайте рассмотрим спецификацию:

Процент вычисляется относительно ширины сгенерированного блока, содержащего блок.

Взгляните на эти знакомые примеры, измененные из предыдущего, чтобы изменить width вместо height:

<div   id="c"  style="width: 200px; height: 100px; background-color: orange">
  <div id="cc" style="width: 50%;   height: 100px; background-color: blue"></div>
</div>

<div   id="d"  style="            height: 100px; background-color: orange">
  <div id="dd" style="width: 50%; height: 100px; background-color: blue"></div>
</div>
  • 50% width:200px составляет 100 пикселей в случае #cc
  • 50% width:auto составляет 50% от того, что заканчивается width:auto, в отличие от height, нет специального правила, которое обрабатывает этот случай по-другому.

Теперь здесь сложный бит: auto означает разные вещи, в зависимости от того, был ли он указан для width или height! Для height это просто означает высоту, необходимую для соответствия содержимому *, но для width, auto на самом деле сложнее. Вы можете видеть из фрагмента кода, что в этом случае он оказался шириной области просмотра.

Что говорит спецификация о значении auto для ширины?

Ширина зависит от значений других свойств. См. Разделы ниже.

Да, это не полезно. Чтобы избавить вас от неприятностей, я нашел вам соответствующий раздел в нашем прецеденте, озаглавленный "Расчет ширины и полей", подзаголовок "блочный уровень, неизменяемые элементы в нормальном поток" :

Среди используемых значений других свойств должны быть следующие ограничения:

'margin-left' + 'border-left-width' + 'padding-left' + 'width' + 'padding-right' + 'border-right-width' + 'margin-right' = width of contains блок

ОК, поэтому width плюс соответствующие границы границ, границ и дополнений должны быть суммированы до ширины содержащего блока (а не потомки, как работает height). Еще одно предложение:

Если для параметра "width" установлено значение "auto", любые другие значения "auto" становятся "0" и "ширина" следует из полученного равенства.

Ага! Таким образом, 50% width:auto составляет 50% от области просмотра. Надеюсь, теперь все станет понятным!


<суб > Сноскисуб >

* По крайней мере, насколько это важно в этом случае. spec Хорошо, теперь все только имеет смысл.

+82
источник
другие ответы

Связанные вопросы


Похожие вопросы

Вам нужно дать ему контейнер с высотой. width использует область просмотра как ширину по умолчанию

+7
источник

Я думаю, вам просто нужно предоставить ему родительский контейнер... даже если высота этого контейнера определена в процентах. Этот шов работает нормально: JSFiddle

html, body { 
    margin: 0; 
    padding: 0; 
    width: 100%; 
    height: 100%;
}
.wrapper { 
    width: 100%; 
    height: 100%; 
}
.container { 
    width: 100%; 
    height: 50%; 
}
+6
источник

Другой вариант - добавить стиль в div

<div style="position: absolute; height:somePercentage%; overflow:auto(or other overflow value)">
 //to be scrolled 
</div>

И это означает, что элемент расположен относительно ближайшего расположенного предка.

+5
источник

Без содержимого высота не имеет значения для вычисления процента. Однако ширина будет принимать процент от DOM, если ни один из родителей не указан. (Используя ваш пример) Размещение второго div внутри первого div, получило бы результат... пример ниже...

<div id="working">
  <div id="not-working"></div>
</div>

Второй div будет составлять 30% от первой высоты div.

+1
источник

Посмотрите другие вопросы по меткам или Задайте вопрос