为什么我用 HTML5 doctype 时无法将我的 div 高度设为 100%？如何让它高度达到 100%？

Question

为什么我用 HTML5 doctype 时无法将我的 div 高度设为 100%？如何让它高度达到 100%？

33

我正在为一个相当简单的画廊Web应用程序安排布局，但是当我使用HTML5文档类型声明时，一些高度为100％的div会缩小，我似乎无法使用CSS将它们放大。

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

如果我移除HTML5文档类型声明，一切都符合我的要求，但我真的想使用正确的HTML5文档类型声明。
如果我将文档类型设置为HTML5并且不做任何更改，则照片div和页脚div将不可见，可能是因为它们的高度为0像素。
如果我将文档类型设置为HTML5并且使body { height: 100px }和.container { height: 100px }或.container { height: 100% }，则它变得可见，但我需要的是完整的高度而不是像素高度。
如果我尝试与上述相同，但使用body { height: 100% }，则照片和页脚div再次不可见。

我需要做什么才能使其高度100％，以便我的照片和页脚div具有完整的高度？

- Grezzo

1

这与HTML5或CSS3无关。（任何其他文档类型会发生什么？自从什么时候 height 成为了新的 CSS3 特性了？） - BoltClock

1

当您将body的高度设置为100％时，您期望它是100％的什么？ - robertc

@BoltClock 感谢您的评论。关于CSS3，您提出了一个公正的观点，我已经将其删除。我没有尝试过任何其他文档类型，我只尝试过没有文档类型或HTML5文档类型。您希望从其他文档类型声明的行为中找出什么问题？我非常乐意尝试一些并报告结果，但不确定哪些是相关的？ - Grezzo

@robertc 我原本期望它占满整个视口，但显然这不是它的工作方式，我也不知道如何以其他方式实现这种效果。 - Grezzo

以下是DOCTYPE问题的解释： https://dev59.com/R1wY5IYBdhLWcg3wyaXW#32215263 - Michael Benjamin

这是关于CSS height属性百分比值的解释：https://dev59.com/51wZ5IYBdhLWcg3wM97Z#31728799 - Michael Benjamin

3个回答

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>

- barraq

2

我遇到了一个类似的问题，需要调整画布的大小，这是我所做的，并且完美地解决了问题。

除了这样做：

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

像这样设置所需的元素：

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

以这种方式，您可以确保视口的宽度和高度均为100%。 vw代表viewwidth vh代表viewheight

我希望这能帮助到某些人。

- Nicholas Fernandes Paolillo

当使用视口单位时，不需要为任何其他元素设置高度，例如 body。 - Asons

在我的情况下，ag-grid 不接受以百分比为单位的高度，因此我将其应用到了 vh 单位上，非常简单。这是一个可行的示例 <ag-grid-angular style="width: 100%; height: 76vh;"></ag-grid-angular>。虽然它对您可能没有太大帮助，但对我很有帮助。 - SUDARSHAN BHALERAO

你好，很高兴知道它在某种程度上对你有所帮助，对于糟糕的回答我深感抱歉，我正在尽力而为。自那时起，我在Canvas定位方面获得了更多的经验，并掌握了一些最佳实践。如果您想将Canvas设置为背景，则始终将其设置为 {position: absolute} 并使用 z-index 将其置于所有其他内容之后。 - Nicholas Fernandes Paolillo

网页内容由stack overflow 提供, 点击上面的

可以查看英文原文，
原文链接

- yunzen · Accepted Answer

只有当父元素设置了高度，也就是不是auto时，子元素的高度百分比才会生效。如果父元素的高度也是100%，那么父元素的父元素高度也必须被定义。这可能一直延伸到html根元素。

因此，请将html和body元素以及您希望在第一次设置height为100%的元素的每个祖先元素的高度都设置为100%。

See this example, to make it clearer:

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>

This wouldn't work, if I didn't give 100% height to—say html element:

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>