修复＆＃x27; html＆＃x27;的大小和身体＆＃x27;元素正是屏幕的元素

Question

我通常需要HTML和body元素具有屏幕大小。通常，在我想拥有svg元素的情况下，适合整个屏幕。

为了实现这一目标，我发现可以使用CSS代码如下。

html,body{margin:0;padding:0;height:100%;}

我人体使用的代码是以下。

html {
    height: 100%;
    display: flex;
}

body {
    flex-grow: 1;
    display: flex;
    flex-direction: column;
}

两者似乎都很好，但是我最近有以下评论。

html {高度：100％;显示：Flex; }是无用的声明。 HTML高度将始终计算为拟合内容。另外，100％表示父母的100％。 html没有父母...还将Flexbox应用于html是没有用的，因为它只有1个可见的子元素：body> body。 P>

实际上：

• 我将的100％ HTML高度放置，以使其适合屏幕高度。
• 我将Flexbox应用于html，以便能够在其子女上使用flex-glow：1，并让这个孩子填写其父母。

有什么比我的更好的解决方案了吗？

Answer 1

我个人使用此方法：

html {
  display: grid;
  min-height: 100%;
}

这将使您的身体全高，默认情况下，也将尊重默认利润率

html {
  display: grid;
  min-height: 100%;
  background: blue;
}

body {
  background: red;
}

您可以轻松地使用高度：内部元素上的100％，而没有问题：

html {
  display: grid;
  min-height: 100%;
  background: blue;
}

body {
  background: red;
}

.box {
  height: 100%;
  border: 5px solid green;
  box-sizing: border-box;
}

<div class="box"></div>

Answer 2

我发现，每当使用需要成为屏幕全高高度的元素时：100VH通常是一个不错的起点。 VH =视口高。我将其使用在高度上：100％取决于布局100％并不总是等于页面高度，因此，使用VH，您可以确切知道自己得到的！

使用VH，您还可以在CSS中使用Calc（），因此，如果您需要身体来填充页面的整个高度，但是减去标头的高度，例如，您可以做这样的事情：

<header style="height: 64px">
<section style="height: calc(100vh - 64px)"