Question

当我检查我的html元素时，我发现即使我在我的css表中将高度设置为100％，它也没有占用100％的浏览器视图。我用chrome和firefox测试它并且它是相同的。浏览器添加display：block到我的html元素可能是原因吗？

Answer 1

它没有采用100％的浏览器视图

如果您严格要求该元素采用浏览器视图＆＃39;或视口的高度，只需执行以下操作：

#element {
  height: 100vh;
}

将元素设置为视口高度的100％。检查this page以获取浏览器支持信息。

Answer 2

您没有提供代码/示例，但我猜您的html和body也没有height: 100%。尝试将它们添加到您的CSS

html, body{
    height: 100%;
}

请注意，高度百分比是指元素的父级，因此，如果元素的父级仅占页面的30％，则元素也将为30％。

Answer 3

确保您的HTML和正文为100％;

＆＃13;

body, html {
    height: 100%
  }

＆＃13;

Answer 4

我发现这种情况的最常见原因是您忘记为 height: 100%和html元素设置body。

请记住百分比是一个相对单位，在找到已声明绝对高度/宽度的父级之前，它无法工作。此外，如果父级的高度/宽度设置为百分比，则该计算值将用作计算子级百分比的基础。

此外，在执行此操作时，您可能需要考虑考虑box-sizing，因为如果您将高度设置为100%，然后将边距和填充应用于该元素，它将会占用超过它父母身高的100％。

假设你的标记就像......

<html>
    <body>
        <div class="my-element"></div>
    </body>
</html>

html,
body, 
.my-element {
    height: 100%;
}

.my-element {
    height: 100vh;
}