css - 如果我使用 HTML5 文档类型，为什么不能使我的 div 100% 高度？我如何获得它的 100% 高度

Question

我正在为一个非常简单的画廊 webapp 进行布局排序，但是当我使用 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 文档类型声明。
• 如果我将文档类型设置为 HTML5 并且不做任何更改，则带有照片的 div 和页脚 div 将不可见，大概是因为它们的高度为 0 像素。
• 如果我将文档类型设置为 HTML5 并使 body { height: 100px } 和 .container { height: 100px } 或 .container { height: 100% ，它变得可见，但我需要的是全高而不是像素高度。
• 如果我尝试执行与上述相同的操作，但使用 body { height: 100% }，照片和页脚 div 将不再可见。

我需要做什么才能使它的高度达到 100%，以便我的照片和页脚 div 为全高？

Answer 1

仅当父元素具有定义的高度时，即不是 auto 的值。如果它的高度为 100%，则还必须定义父项的父项高度。这可能一直到 html 根元素。

因此将 html 和 body 元素的高度设置为 100%，以及该元素的每个祖先元素您首先希望获得 100% 高度。

看这个例子，为了更清楚:

html, body, .outer, .inner, .content {
  height: 100%;
  padding: 10px;
  margin: 0;
  background-color: rgba(255,0,0,.1);
  box-sizing: border-box;
}

<div class="outer">
  <div class="inner">
    <div class="content">
      Content
    </div>
  </div>
</div>

如果我不给 html 元素 100% 的 height ，这是行不通的:

body, .outer, .inner, .content {
  height: 100%;
  padding: 10px;
  margin: 0;
  background-color: rgba(255,0,0,.1);
  box-sizing: border-box;
}

<div class="outer">
  <div class="inner">
    <div class="content">
      Content
    </div>
  </div>
</div>

... 或 .inner

html, body, .outer, .content {
  height: 100%;
  padding: 10px;
  margin: 0;
  background-color: rgba(255,0,0,.1);
  box-sizing: border-box;
}

<div class="outer">
  <div class="inner">
    <div class="content">
      Content
    </div>
  </div>
</div>