为什么我的 div 高度应该更小？ [关闭]答案

【问题标题】：Why my div height is smaller that is supposed to be? [closed]为什么我的 div 高度应该更小？ [关闭]
【发布时间】：2020-09-17 22:53:37
【问题描述】：

#mainCoridor div 的高度低于我显示器屏幕的 10%，我不知道为什么。

代码：

body {
    height: 60vh;
    width: 100%;
    margin: 0;
    padding: 0;
    background-color: unset;
}

#mainCoridor {
    position: relative;
    width: 100%;
    height: 10%;
    background-color: tomato;
}

<body>
    <div id="mainCoridor"></div>
</body>

标签： css height

【解决方案1】：

您的身体设置为占据视口高度的 60%。

mainCridor div 设置为占据身体高度的 10%（视口高度的 60% 的 10%）。看图

如果你想让 mainCoridor 占据 10%，你需要将 body 设置为 100vh。

【讨论】：

在 OP 编辑问题后，#mainCoridor { height: 10vh } 会更有意义...这将引入问题：什么时候？横向或纵向或两者兼而有之？使用 VMIN 怎么样？

【解决方案2】：

因为mainCoridor 的父级设置为占视口高度的 60%，因此该元素将根据父级计算其高度（60 的 10%）。

您可以将车身高度更改为 100vh 或将 mainCoridor's 高度设置为 10vh。

https://www.tutorialrepublic.com/faq/how-to-set-a-div-height-to-100-percent-using-css.php

【讨论】：