为什么我不能让我的分度100％的高度，如果我使用HTML5的doctype？我如何得到它100

我努力让分选一个非常简单的Web应用程序库的布局，但是当我使用了HTML5 doctype声明，我的一些申报单（这是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 doctype声明，一切都是因为我希望它是，但我真的想用正确的HTML5 doctype声明。
如果我设置的doctype到HTML5并没有改变，与照片div和页脚div的是不可见的，大概是因为他们都是0像素高。
如果我设置的doctype到HTML5，使body { height: 100px }和.container { height: 100px }或.container { height: 100% } ，它变得可见，但我需要的是它必须是充分的高度，而比在像素的高度。
如果我尝试做上述相同，但与body { height: 100% }照片和页脚的div又是不可见的。

我需要什么做的就是它的高度100％，这样我的照片和页脚的div充满高度？

Answer 1:

只有当父元素具有规定的高度上，i..e不是值auto 。如果有100％的高度，父亲的父亲身高必须被重新定义了。这可能会去，直到到html根元素。

因此，设置的高度html和body元素100%以及您希望有该元素的每一个祖先元素100% height摆在首位。

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

Answer 3:

我被困到了类似的problema大小画布，所以这里是我做的和完美。

除了做的：

body{ width: 100%; heigh: 100%;}

这样设置所需的元素：

.desired-element{ width: 100vw; heigh: 100vh}

这样，你就放心有视口的100％的宽度和高度。大众表示viewwidth和VH代表viewheight

我希望这可以帮助别人

文章来源: Why can't I make my div 100% height if I use an HTML5 doctype? How do I get it 100% height