Question

我正在努力为一个非常简单的画廊webapp排序布局，但是当我使用HTML5 doctype声明时，我的一些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 doctype声明，那么就像我希望的那样，但我真的想使用正确的HTML5 doctype声明。
如果我将doctype设置为HTML5并且不做任何更改，那么带有照片和页脚div的div是不可见的，大概是因为它们是0px高。
如果我将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

我陷入了类似的问题，无法调整画布的尺寸，所以这就是我的工作方式和完美的工作方式。

除了做：

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

像这样设置所需的元素：

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

这样可以确保您的视口的宽度和高度为100％。 vw代表viewwidth 和 vh代表viewheight

我希望这对某人有帮助

如果我使用HTML5文档类型，为什么我不能使我的div达到100％的高度？我怎样才能达到100％的高度

3 个答案: