Высота Css в процентах не работает

У меня есть следующий простой код:

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml" xml:lang="en">

<head>
  <title>Live Feed</title>

  <meta http-equiv="content-type" content="text/html; charset=UTF-8" />

  <style>
    body {
      margin: 0px;
      padding: 0px;
    }
  </style>
</head>

<body>
  <div style="background-color: #eeaabb; width: 250px; height: 100%; border-right: solid 1px #e1e1e1;">
    I should be tall
  </div>
</body>

</html>

Но div не отображается с высотой 100%. Зачем?

+112
24 нояб. '11 в 21:58
источник поделиться
8 ответов

Вам нужно установить высоту 100% на все ваши родительские элементы, в этом случае ваше тело и html. Этот fiddle показывает, что он работает.

html, body { height: 100%; width: 100%; margin: 0; }
div { height: 100%; width: 100%; background: #F52887; }
<html><body><div></div></body></html>
+125
24 нояб. '11 в 22:00
источник

Сделайте это на 100% от высоты видового экрана:

div {
  height: 100vh;
}

Работает во всех современных браузерах и IE> = 9, см. Здесь дополнительную информацию.

+58
11 июн. '14 в 13:36
источник
другие ответы

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


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

height: 100% работает, если вы задаете фиксированный размер родительскому элементу.

+19
24 нояб. '11 в 22:01
источник

Вы можете добиться этого, используя позиционирование.

Попробуйте

position: absolute;

чтобы получить 100% -ную высоту.

+7
15 сент. '13 в 17:46
источник

Вам нужно установить высоту 100% для родительского элемента.

+5
15 мая '14 в 9:55
источник

Добавить высоту: 100% к телу

body{height:100%}
+4
24 апр. '13 в 14:06
источник

Это то, что вам нужно в css:

html, body 
{ 
height: 100%; 
width: 100%; 
margin: 0; 
}
+2
29 июл. '14 в 10:26
источник

корневой родитель должен находиться в пикселях, если вы хотите свободно работать с процентами,

<body style="margin: 0px; width: 1886px; height: 939px;">
<div id="containerA" class="containerA" style="height:65%;width:100%;">
    <div id="containerAinnerDiv" style="position: relative; background-color: aqua;width:70%;height: 80%;left:15%;top:10%;">
       <div style="height: 100%;width: 50%;float: left;"></div>
       <div style="height: 100%;width: 28%;float:left">
            <img src="img/justimage.png" style="max-width:100%;max-height:100%;">
       </div>
       <div style="height: 100%;width: 22%;float: left;"></div>
    </div>
</div>
</body>
+2
19 июн. '15 в 21:46
источник

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