Как задать высоту блока в процентах, в адаптивной верстке?

Question

[virtualhero]

Объясните пожалуйста как быть с высотой блоков впроцентах? с шриной проблем нет но с высотой ничего не выходит. Вот пример: jsfiddle.net/Lxthaef6 верхняя синяя линия установлена в 60px но я хочу ее в процентах задать, так как должна быть больше, не понимаю как можно ее в процентах задать чтобы высота адаптивной была. Помогите пожалуйста.

Answer 1

[Олег Машко]

Нужно задать padding-bottom: [x-значение от ширины] %; и все будет работаь.
jsfiddle.net/Lxthaef6/1 - пример исправленный.

Comments

[virtualhero]

причем здесь значение от ширины и паддинг вообще? а если нужно чтобы внутри этого елемента все было заполнено? как же паддинг тогда?

[Олег Машко]

virtualhero: все отлично заполняется. И все работает - проверенно.

Answer 2

[Анна Бакурова]

Если не нужна железная кроссбраузерность используйте vh и vw почитать про них можно тут shpargalkablog.ru/2013/03/px-em-calc.html

Проценты без костылей (ужасных) выставить по высоте нельзя, а вот vh и vw легко, в некоторых случаях вообще всё ещё лучше использовать js.

Comments

[virtualhero]

а можно пример с js пожалуйста?)

[Анна Бакурова]

virtualhero: var $a = document.getElementById('name'); a = $a.clientHeight; $a.children[0].style.height = a + 'px';

- 'это на чистом js.

[Анна Бакурова]

на $ у меня просто называются переменные которые содержат селекторы

Answer 3

[Роман]

вертикальные параметры в % зависят от ширина родителя.