当高度没有在任何地方明确设置时，为什么div的高度设置为200px？答案

【问题标题】：Why does the height of the div set to 200px when the height is not set explicitly anywhere?当高度没有在任何地方明确设置时，为什么div的高度设置为200px？
【发布时间】：2018-07-02 07:36:55
【问题描述】：

我有以下代码，其中 div 绝对位于相对容器内。相对 div 的height 设置为0 和padding-bottom 到100%，因为内部内容将被动态加载，因此外部容器的尺寸将保持不变。

我的内部 div 有许多 divelements，其高度与外部 div 的高度相交，但是外部 div 的高度设置为与宽度相同的值。

CSS：

.container {
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
}
.right-modal {
  position: absolute;
  top: 0;
  right: 0;
  bottom: 0;
  width: 200px;
}
.my-frame-container {
  position: relative;
  height: 0;
  padding-bottom: 100%;
  overflow: hidden;
}
.my-frame-content {
  position: absolute;
  height: 100%;
  width: 100%;
}

HTML：

<!DOCTYPE html>
<html>
<head>
  <meta charset="utf-8">
  <meta name="viewport" content="width=device-width">
  <title>JS Bin</title>
</head>
<body>
  <div class="container">
    <div class="right-modal">
      <div class="my-frame-container">
        <div class="my-frame-content">
          <div class="box"> Hello </div>
          <div class="box"> Hello </div>
          <div class="box"> Hello </div>
          <div class="box"> Hello </div>
          <div class="box"> Hello </div>
          <div class="box"> Hello </div>
          <div class="box"> Hello </div>
          <div class="box"> Hello </div>
          <div class="box"> Hello </div>
          <div class="box"> Hello </div>
          <div class="box"> Hello </div>
          <div class="box"> Hello </div>
          <div class="box"> Hello </div>
          <div class="box"> Hello </div>
          <div class="box"> Hello </div>
          <div class="box"> Hello </div>
          <div class="box"> Hello </div>
          <div class="box"> Hello </div>
          <div class="box"> Hello </div>
          <div class="box"> Hello </div>
          <div class="box"> Hello </div>
          <div class="box"> Hello </div>
          <div class="box"> Hello </div>
          <div class="box"> Hello </div>
          <div class="box"> Hello </div>
          <div class="box"> Hello </div>
          <div class="box"> Hello </div>
          <div class="box"> Hello </div>
          <div class="box"> Hello </div>
          <div class="box"> Hello </div>
          <div class="box"> Hello </div>
          <div class="box"> Hello </div>
          <div class="box"> Hello </div>
          <div class="box"> Hello </div>
          <div class="box"> Hello </div>
          <div class="box"> Hello </div>
          <div class="box"> Hello </div>
       </div>
     </div>
    </div>
  </div>

</body>
</html>

我想知道代码中divmy-frame-container的高度是怎么变成200px的。

这是 js bin 的 link。

确切地说，我在任何样式中都没有将高度明确设置为 200px，但为什么 div my-frame-container 和 my-frame-content 的高度设置为 200px。

【问题讨论】：

不明白这个问题。您需要什么帮助？
你能重新表述一下这个问题吗？如果您的意思是“为什么检查员在工具提示中说 my-frame-container 的高度是 200px”，答案是因为工具提示中添加了高度和填充属性。
@Naomi 我已经更新了这个问题。现在清楚了吗？

标签： css height css-position

【解决方案1】：

正如我在评论中所说，这是因为浏览器在弹出工具提示中显示大小时会将height 和padding 的值加在一起。

如果您要查看下面开发人员工具部分中的样式，它确实提到了 200 × 0 的大小和 200 的填充。

【讨论】：

【解决方案2】：

这是因为您将该 div 设置在另一个具有右模式类的 div 下，您将其高度设置为 200 像素

【讨论】：

我还没有将height 设置为right-modal 类。只有宽度。高度是根据宽度自动计算的吗？
是的，只需将宽度更改为 0，您将不会在屏幕上看到任何内容