Почему я не могу создать высоту div на 100%, если я использую HTML-тип? Как получить 100% высоту

Я работаю над тем, чтобы макет был отсортирован для довольно простой галереи webapp, но когда я использую декларацию doctype HTML5, высота некоторых моих div (которые были на 100%) уменьшаются, и я не могу Кажется, они путают их, используя CSS.

Мой HTML находится в https://dl.dropbox.com/u/16178847/eyewitness/b/index.html и css находится в https://dl.dropbox.com/u/16178847/eyewitness/b/style.css

Если я удалю декларацию типа HTML5, все будет так, как я хочу, но я действительно хочу использовать правильное объявление типа HTML5.
Если я устанавливаю doctype на HTML5 и не вношу никаких изменений, div с фотографией и нижними колонтитулами не отображается, по-видимому, потому, что они высотой 0px.
Если я установил doctype в HTML5 и сделаю body { height: 100px } и .container { height: 100px } или .container { height: 100% }, он станет видимым, но мне нужно, чтобы он был полной высотой, а не высотой в пикселях.
Если я попытаюсь сделать то же самое, что и выше, но с помощью body { height: 100% } разделители фото и нижнего колонтитула снова не видны.

Что мне нужно сделать, чтобы получить 100% в высоту, чтобы мои фото и нижние колонтитулы были полными?

Ответ 1

Только в том случае, если родительский элемент имеет определенную высоту, то... не значение auto. Если это имеет высоту 100%, также должна быть определена родительская высота родителя. Это может продолжаться до корневого элемента html.

Таким образом, установите высоту элемента html и body на 100%, а также каждый элемент предка этого элемента, который вы хотите иметь 100% height в первую очередь.

Ответ 2

Действительно, чтобы заставить его работать, сделайте следующее:

<!DOCTYPE html>
<html>
<head>
  <title>Vertical Scrolling Demo</title>
  <style>
    html, body {
      width: 100%;
      height: 100%;
      background: white;
      margin:0;
      padding:0;
    }
    .page {
      min-height: 100%;
      width: 100%;
    }
  </style>
</head>
<body>
  <div id="nav" class="page">
    <ul>
      <li><a href="#about">About</a></li>
      <li><a href="#portfolio">Portfolio</a></li>
      <li><a href="#contact">Contact</a></li>
    </ul>
  </div>
  <div id="page1" class="page">
    <h1><a name="about">about</a></h1>
    About page content goes here.
  </div>
  <div id="page2" class="page">
    <h1><a name="portfolio">portfolio</a></h1>
    Portfolio page content goes here.
  </div>
  <div id="page3" class="page">
    <h1><a name="contact">contact</a></h1>
    Contact page content goes here.
  </div>
</body>
</html>