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

Возможный дубликат:
Процентная высота HTML 5/CSS

Это должно быть просто, но я почему высота, указанная в процентах для div, не применяется к ней.

Например:

<div class="container">
  adsf
</div>

CSS

.container
{
  width:80%;
  height:50%;
  background-color:#eee;
}

Когда я меняю высоту с% на px, она отлично работает. % является таким же действительным, как px, но почему работает только px, а% нет. здесь - это jsfiddle

Edit Хотя я пропустил точку с запятой после 50% в оригинальном вопросе, который полностью испортил ее. На самом деле то, что я хотел спросить, было то, почему 50% не поглощают 50% своего контейнера. Он берет только высоту от своего содержимого, а не 50% его контейнера.

Ответ 1

Это не занимает 50% всей страницы, потому что "целая страница" - это только то, насколько высок ваш контент. Измените вложенные значения html и body на 100%, и он будет работать.

html, body{
    height: 100%;
}
div{
    height: 50%;
}

http://jsfiddle.net/DerekL/5YukJ/1/

^ Ваш документ высок только 20px. 50 %20px - 10px, и это не то, что вы ожидали.

^ Теперь, если вы измените высоту документа на высоту всей страницы (150 пикселей), 50% от 150 пикселей составит 75 пикселей, тогда она будет работать.

Ответ 2

Вам также нужно указать высоту body и html. В противном случае тело будет только до уровня его содержимого (единственный div), а 50% этого будет половиной высоты этого div.

Обновлен скрипт: http://jsfiddle.net/j8bsS/5/

Ответ 3

Точка с запятой отсутствует (;) после "50%"

но вы также должны заметить, что процент вашего div связан с div, который содержит его.

например:

<div id="wrapper">
  <div class="container">
   adsf
  </div>
</div>

#wrapper {
  height:100px;
}
.container
{
  width:80%;
  height:50%;
  background-color:#eee;
}

здесь высота вашего .container будет 50px. это будет 50% от 100px из div обертки.

если у вас есть:

adsf

#wrapper {
  height:400px;
}
.container
{
  width:80%;
  height:50%;
  background-color:#eee;
}

тогда вы .container будет 200px. 50% обертки.

Итак, вы можете посмотреть, как divs "завертывает" ваш ".container"...