CSS3 ширина и высота соотношение

Question

Итак, я запутался по этому поводу, а потом понял, что я на самом деле не имею представления о том, что я должен ввести в качестве запроса в Google, так что я хотел бы получить ответ:

Если Я хотел, чтобы определить высоту и ширину в CSS3, используя проценты, например:

#wrap{ 
    width: 100%; 
    height: 250%; 
} 

по высоте, рассчитанным в соответствии с полной высотой вьюпорта, или он рассчитывается в соответствии с заданной шириной (как если бы - набор шириной становится базовым значением для всего)? Например:

width = 1000px 
height = 1200px 

Является ли тогда:

width = 100% <=> width = 1000px 
height = 250% <=> height = 2.5 * 1200px = 3000px 

или:

width = 100% <=> width = 1000px 
height = 250% <=> height = 2.5 * width = 2.5 * 1000px = 2500px 

?

Кроме того, применяется ли то же правило в зависимости от того, что оно может быть применимо ко всем другим элементам? Я вычисляю высоту в соответствии с высотой родительского элемента и шириной в соответствии с шириной родительского элемента, или ширина становится 100%, к которой все относится?

Answer 1

Высота не обязательно рассчитывается на всю высоту порта просмотра, она рассчитывается по определенному значению. Если вы #wrap вложенными #container и определил его следующим образом:

#container{ 
height: 1000px; 
width: 200px; 
} 

#wrap{ 
height:100%; 
width: 50%; 
} 

Затем, объявив высоту обруча как 100%, что это 100% моего 1000px (который 1000px), однако ширина 50% составляет 50% 200px (100px). Хотя, если он не был вложен, он по-прежнему вычисляется по «определенной ширине», которая по умолчанию задает все окно браузера, если не указано иное.

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

Для видовых экранов и т.п. и размер его в полном размере в окне браузера. Я рекомендую посмотреть этот пост Джеймса на Make div 100% height of browser window. Он подробно разбирается в том, как работают видоискатели и их преимущества по сравнению с обычными 100%

Answer 2

, например, если у вас есть это:

<div id="outer"> 

<div id="inner"></div> 

</div> 

и этого CSS

#outer { 
width: 1000px; 
height: 1000px; 
} 

#inner { 
width: 50%; /* is 500 */ 
height: 200%; /* is 2000 */ 
} 

вот масштабируется скрипка: http://jsfiddle.net/q6ux91x9/

Процент система работает по отношению к охватывающему элементу или документу/window, если отсутствует содержащий элемент.