百分比高度 HTML 5/CSS答案

【问题标题】：Percentage Height HTML 5/CSS百分比高度 HTML 5/CSS
【发布时间】：2010-12-09 23:19:06
【问题描述】：

我正在尝试在 CSS 中将<div> 设置为某个百分比高度，但它只是保持与其中内容相同的大小。但是，当我删除 HTML 5 <!DOCTYTPE html> 时，它会起作用，<div> 根据需要占据整个页面。我想验证页面，我该怎么办？

我在<div> 上有这个CSS，它的ID 为page：

#page {
    padding: 10px;
    background-color: white;
    height: 90% !important;
}

【问题讨论】：

下面是 CSS height 属性与百分比值的简单明了的解释：stackoverflow.com/a/31728799/3597276
解决 DOCTYPE 问题：stackoverflow.com/a/32215263/3597276
看看这篇根据 CSS 规范给出答案的帖子：stackoverflow.com/a/31032477/247696

标签： html css height

【解决方案1】：

bobince 的回答会让您知道在哪些情况下“身高：XX%；”将或不会工作。

如果你想创建一个具有固定比例的元素（高度：它自身宽度的百分比），请使用aspect-ratio 属性。确保未在元素上显式设置高度以使其正常工作。 https://developer.mozilla.org/en-US/docs/Web/CSS/aspect-ratio

.square {
  width: 100%;
  height: unset;
  aspect-ratio: 1 / 1;
}

从历史上看，最好的方法是使用padding-bottom 设置高度。正方形示例：

<div class="square-container">
  <div class="square-content">
    <!-- put your content in here -->
  </div>
</div>

.square-container {  /* any display: block; element */
  position: relative;
  height: 0;
  padding-bottom: 100%; /* of parent width */
}
.square-content {
  position: absolute;
  left: 0;
  top: 0;
  height: 100%;
  width: 100%;
}

方形容器将仅由填充组成，内容将扩展以填充容器。 2009 年关于此主题的长文：http://alistapart.com/article/creating-intrinsic-ratios-for-video

【讨论】：

这很好用。在调整包含 100 多个元素的页面大小时，它在浏览器中也感觉很快。谢谢！

【解决方案2】：

使用新的 CSS 大小调整属性，您可以避免在父级上不设置精确高度。新的block-size 和inline-size 属性可以这样使用：

<!DOCTYPE html>
<style>
  #parent {
    border: 1px dotted gray;
    height: auto;   /* auto values */
    width: auto;
  }

  #wrapper {
    background-color: violet;
    writing-mode: vertical-lr;
    block-size: 30%;
    inline-size: 70%;
  }

  #child {
    background-color: wheat;
    writing-mode: horizontal-tb;
    width: 30%;  /* set to 100% if you don't want to expose wrapper */
    height: 70%; /* none of the parent has exact height set */
  }
</style>

<body>
  <div id=parent>
    <div id=wrapper>
      <div id=child>Lorem ipsum dollar...</div>

在全页模式下调整浏览器窗口的大小。我认为这些值是相对于视口高度和宽度的。

欲了解更多信息，请参阅：https://www.w3.org/TR/css-sizing-3/
几乎所有浏览器都支持：https://caniuse.com/?search=inline-size

【讨论】：

【解决方案3】：

为了使用百分比（%），您必须定义其父元素的百分比。如果您使用 body{height: 100%} 它将不起作用，因为它的父级没有高度百分比。在这种情况下，为了达到身高，您必须将其添加到 html{height:100%}

在其他情况下，您可以使用该定义的父百分比来摆脱该定义

body{height:100vh}

vh 代表视口高度

【讨论】：

【解决方案4】：

有时，您可能希望有条件地设置 div 的高度，例如当整个内容小于屏幕高度时。将所有父元素设置为 100% 会在内容长于屏幕尺寸时截断内容。

所以，解决这个问题的方法是设置最小高度：

继续让父元素自动调整高度然后在您的主 div 中，从 100vh（视口单位）中减去页眉和页脚 div 的像素大小。在 css 中，类似于：

最小高度：计算（100vh - 246px）；

100vh 是屏幕的全长，减去周围的 div。通过设置 min-height 而不是 height，比屏幕长的内容将继续流动，而不是被截断。

【讨论】：

【解决方案5】：

您还需要设置<html> 和<body> 元素的高度；否则，它们只会大到足以容纳内容。 For example:

<!DOCTYPE html>
<title>Example of 100% width and height</title>
<style>
html, body { height: 100%; margin: 0; }
div { height: 100%; width: 100%; background: red; }
</style>
<div></div>

【讨论】：

¬_¬ 我花了 20 分钟才弄清楚我还必须将文档的高度设置为 100%。我读这篇文章有点晚了，但它仍然非常精彩。叹息
这应该被选为答案，因为它为很多来到这里的人提供了一个解决方案，想知道什么可以做最多观看第一个答案并认为这是不可能的，并且想着是否还有其他方法不读就存在
我同意这是正确的答案，高度不起作用，因为需要设置作为 body 和 html 的父元素。这个答案应该是公认的答案。
这不是一个正确的答案 - 如果内容大于屏幕的高度，那么其余的内容无论如何都不再可见，因此高度没有设置为 100%浏览器窗口，但又是 100% 的内容。这可能不合逻辑，但在 Firefox 和 Chrome 这两个主要浏览器中确实会发生这种情况 - 试试看吧。因此，接受的答案是唯一正确的答案。

【解决方案6】：

您可以使用100vw / 100vh。 CSS3 为我们提供了与视口相关的单位。 100vw 表示 100% 的视口宽度。 100vh； 100% 的高度。

    <div style="display:flex; justify-content: space-between;background-color: lightyellow; width:100%; height:85vh">
        <div style="width:70%; height: 100%; border: 2px dashed red"></div>
        <div style="width:30%; height: 100%; border: 2px dashed red"></div>
    </div>

【讨论】：

【解决方案7】：

我正在尝试在 CSS 中将 div 设置为某个百分比高度

百分之几？

要设置百分比高度，其父元素 (*) 必须具有明确的高度。这是不言而喻的，因为如果您将高度保留为auto，则该块将采用其内容的高度......但如果内容本身的高度以您制作的父级百分比表示你自己有点 Catch 22。浏览器放弃并只使用内容高度。

所以 div 的父级必须有一个显式的height 属性。虽然如果你愿意，这个高度也可以是一个百分比，这只是将问题提升到一个新的水平。

如果你想让 div 高度占视口高度的百分比，那么 div 的每个祖先，包括<html> 和<body>，都必须有height: 100%，所以有一个明确的百分比高度链向下到 div。

(*: 或者，如果 div 已定位，则为“包含块”，它也是要定位的最近的祖先。)

另外，所有现代浏览器和 IE>=9 都支持相对于视口高度 (vh) 和视口宽度 (vw) 的新 CSS 单位：

div {
    height:100vh; 
}

查看这里more info。

【讨论】：

虽然不适用于纵向屏幕方向stackoverflow.com/questions/23198237/…
请看下面 Brian Campbell 的回答，我相信这是正确的解决方案。这个答案似乎是一种解决方法，并没有解决实际问题。
好吧，那么为什么jsfiddle.net/8dkzp49w/16 这个例子不为宽度创建catch 22？ ://