Высота Css в процентах не работает [дубликат]

Question

Высота Css в процентах не работает [дубликат]

этот вопрос уже есть ответ здесь:

процент высоты HTML 5 / CSS

4 ответы

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

<!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%. Зачем?

477 8

html css

8 ответов:

Comments

Ничего не найдено.

Jan Dragsbaek · Accepted Answer · 2016-01-22 13:08:48

вам нужно установить 100% высоту на всех ваших родительских элементов, в этом случае ваше тело и html. Это скрипка показывает, что это работает.
html, body { height: 100%; width: 100%; margin: 0; }
div { height: 100%; width: 100%; background: #F52887; }
<html><body><div></div></body></html>

mb21 · Accepted Answer · 2018-06-21 11:02:57

сделать это 100% высоты области просмотра:
div {
  height: 100vh;
}
работает во всех современных браузерах и IE>=9, см. здесь подробнее.

GG. · Accepted Answer · 2011-11-25 00:01:54

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

Muthu · Accepted Answer · 2013-09-15 21:03:42

вы можете добиться этого с помощью позиционирования.

попробовать
position: absolute;
чтобы получить 100% рост.

rahul · Accepted Answer · 2014-05-15 12:55:32

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

Pramod Bhoi · Accepted Answer · 2013-04-24 17:06:58

добавить высоту: 100% к телу
body{height:100%}

Proxytype · Accepted Answer · 2015-06-20 00:46:57

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

<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>

SiggeLund · Accepted Answer · 2016-08-01 17:34:54

Это то, что вам нужно в CSS:
html, body 
{ 
height: 100%; 
width: 100%; 
margin: 0; 
}