32

我正在努力为一个非常简单的画廊 web 应用程序排序布局，但是当我使用 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 }and .container { height: 100px }or .container { height: 100% }，它变得可见，但我需要的是它是全高而不是像素高度。
  • 如果我尝试执行与上述相同的操作，但body { height: 100% }照片和页脚 div 将不再可见。

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

4

3 回答 3

39

仅当父元素具有定义的高度时，即不是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说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>

… 或者.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>

于 2012-06-03T16:30:36.127 回答
7

实际上，要使其工作，请执行以下操作：

<!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>
于 2012-06-08T08:50:51.173 回答
2

我陷入了一个类似的问题来调整画布的大小，所以这就是我所做的并且工作得很好。

除了做：

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

像这样设置所需的元素：

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

这样，您就可以确保在宽度和高度上拥有 100% 的视口。vw 代表 viewwidth 和 vh 代表 viewheight

我希望这可以帮助别人

于 2018-12-29T21:21:00.217 回答