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

【问题标题】：Why can't I make my div 100% height if I use an HTML5 doctype? How do I get it 100% height如果我使用 HTML5 文档类型，为什么我不能让我的 div 高度为 100%？如何获得 100% 高度
【发布时间】：2021-01-07 00:04:04
【问题描述】：

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

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

【问题讨论】：

这与 HTML5 或 CSS3 无关。（任何其他文档类型会发生什么？从什么时候height 成为新的 CSS3 事物？）
当你将身体的高度设为 100% 时，你期望它是 100% 的高度是多少？
@BoltClock 感谢您的评论。这是关于 CSS3 的一个公平点，我已经删除了那个标签。我没有尝试过任何其他文档类型，我只尝试过没有文档类型或 HTML5 文档类型。您希望从其他 doctype 声明的行为中找出什么？我很乐意尝试一些并报告，但不确定哪些与尝试相关？
@robertc 我期待它是视口的 100%，大概不是它的工作原理，但我不知道如何以任何其他方式获得这种效果。
这里是 DOCTYPE 问题的解释：stackoverflow.com/a/32215263/3597276

标签： css html quirks-mode

【解决方案1】：

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

【讨论】：

那么你是说（在标准模式下）没有办法使页面与视口的高度相同（不使用 javascript 以单位而不是百分比来设置高度）？
我想说你可以。给 html 元素 100% 的高度，给 body 元素 100% 的高度，以此类推，body 的每个子元素和该元素的子元素，直到你首先到达你想要 100% 的元素。
这正是解决方案，我不知道您可以将 CSS 应用于 html 元素。不错！

【解决方案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>

【讨论】：

【解决方案3】：

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

除了做：

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

像这样设置所需的元素：

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

通过这种方式，您可以确保在宽度和高度上拥有 100% 的视口。 vw 代表视图宽度和 vh 代表视高

我希望这对某人有所帮助

【讨论】：

当使用视口单位时，不需要为任何其他元素设置任何高度，在本例中为body。
在我的情况下，ag-grid 没有在% 中获取高度，因此在vh 中应用了高度，超级简单。这是工作<ag-grid-angular style="width: 100%; height: 76vh;"></ag-grid-angular>。这与我无关，但对我有帮助。
您好，很高兴知道它对您有所帮助，抱歉回答不好，我正在尽力。自从有了这个答案，我在 Canvas 定位方面获得了更多经验，并获得了一些最佳实践。始终将画布设置为 {position: absolute} 并使用 z-index 将其放在其他所有内容的后面，如果您希望它成为您的背景。