Процент роста не работает в CSS

Я пытаюсь использовать свойство height с использованием процентов, но это не работает. Я хочу использовать процент, чтобы он выглядел отлично в любом разрешении.

<div id="bloque_1" style="height: 80%;background: red">   
</div>

Как я могу заставить его работать?

Ответ 1

Когда вы используете % для ширины или высоты, первый вопрос, который вы должны задать, это 80% чего? Таким образом, вам также нужно применить высоту к родительскому элементу, поэтому, полагая, что этот ваш элемент находится внутри тега body, вам нужно использовать его в своем CSS

html, body {
   height: 100%;
}

Итак, теперь ваш элемент div будет 80% из 100%

Демо

Боковое примечание. Также, когда вы имеете дело с absolute позиционируемыми элементами, вы можете столкнуться с сценарием, в котором ваш div не будет превышать текущую высоту видового экрана, поэтому в этом случае вам нужно иметь min-height

Ответ 2

Все, кроме bloque_1, будет нуждаться в высоте, или вы получите 80% от 0. Вы также можете применить высоту 100% к body.

Здесь jsfiddle, который показывает его в действии.

Ответ 3

Примените высоту 100% к родительскому элементу

HTML code-

<html>
<body>
<div id="bloque_1" style="height:80%;background:red;width:100%;">   
</div>
</body>
</html>

CSS Часть -

html, body { height: 100%; width: 100%; margin: 0;background: #3c3c3c }

Рабочий скрипт - http://jsfiddle.net/SEafD/1/

Ответ 4

Демо

html,body{
    height:100%
}
#bloque_1{
    background:red;
    height:80%;
}