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

我正在努力为一个非常简单的画廊 Web 应用程序排序布局，但是当我使用 HTML5 文档类型声明时，我的一些 div 的高度（100％）会立即缩小，而且我似乎无法丰满他们使用 CSS 进行备份。

我的 HTML 位于https://dl.dropbox.com/u/16178847/eyewitness/b/index.html https://dl.dropbox.com/u/16178847/eyewitness/b/index.htmlCSS 位于https://dl.dropbox.com/u/16178847/eyewitness/b/style.css https://dl.dropbox.com/u/16178847/eyewitness/b/style.css

• 如果我删除 HTML5 文档类型声明，一切都会如我所愿， 但我真的想使用正确的 HTML5 文档类型声明。
• 如果我将 doctype 设置为 HTML5 并且不进行任何更改，则带有照片的 div 和页脚 div 将不可见，大概是因为它们的高度为 0px。
• 如果我将文档类型设置为 HTML5 并制作body { height: 100px } and .container { height: 100px } or .container { height: 100% }，它变得可见，但我需要的是它是全高度而不是像素高度。
• 如果我尝试做与上面相同的事情，但是使用body { height: 100% }照片和页脚 div 不再可见。

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

仅当父元素具有定义的高度时，即不是值auto。如果其高度为 100%，则还必须定义父级的父级高度。这可能会持续到html根元素。

所以设置高度html和body元素到100%，以及您希望拥有的该元素的每个祖先元素100% height首先。

请参阅此示例，以便更清楚地了解：

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>

如果我不付出100%的话，这是行不通的height to—say 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>

… or .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>