Question

我有以下代码：

* {
  box-sizing: border-box;
}

html,
body {
  height: 100%;
  padding: 10px;
}

body {
  position: relative;
}

#outer {
  position: absolute;
  top: 0;
  left: 0;
  border: 2px solid green;
  padding: 5px;
  max-width: 100%;
  max-height: 100%;
}

#inner {
  border: 2px solid red;
  font-size: 5em;
  overflow: auto;
  height: 100%;
}

<html>

<body>
  <div id="outer">
    <div id="inner">
      This is a loooooooonnnng<br>text.<br> Spanning
      <br>multiple<br>lines.
    </div>
  </div>
</body>

</html>

调整浏览器窗口的大小，您可以看到内部 div 的高度比外部 div 扩展得更多。但是，如果我在外部 div 上指定一个高度，比如 height: 1000px;，内部 div 的大小会被调整以适应外部 div 的高度。为什么会这样？如果不指定高度，max-height 不应该工作吗？

Answer 1

max-height 属性设置元素的最大高度。它可以防止 height 属性的使用值变得大于为 max-height 指定的值。

当您在父容器上使用 max-height: 100% 时，百分比是根据生成的框的包含块的高度计算的。如果没有明确指定包含块的高度，并且该元素不是绝对定位的，则百分比值被视为none。

<块引用>

就max-height而言，如果内容大于最大高度，就会溢出。

要让子容器始终适合父容器，您可以只使用 CSS Flexbox 或将 overflow: auto 添加到 #outer，这样它就可以 100% 适合其中的内容内容框。在不使用 overflow 或 Flexbox 的情况下，子容器的内容大于最大高度，因此在视口高度较小时会溢出 #outer 的底部。

从 height: 100% 中删除 #inner 声明，同时使父容器成为带有 display: flex 的 Flexbox 似乎无需将 overflow: auto 添加到 #outer .

* {
  box-sizing: border-box;
}

html,
body {
  height: 100%;
  padding: 10px;
}

body {
  position: relative;
}

#outer {
  position: absolute;
  top: 0;
  left: 0;
  border: 2px solid green;
  padding: 5px;
  max-width: 100%;
  max-height: 100%;
  display: flex;
}

#inner {
  border: 2px solid red;
  font-size: 5em;
  overflow: auto;
}

<html>

<body>
  <div id="outer">
    <div id="inner">
      This is a loooooooonnnng<br>text.<br> Spanning
      <br>multiple<br>lines.
    </div>
  </div>
</body>

</html>

Answer 2

~~只需从 max-height div 中删除 #outer 声明。~~

要解决您的问题，请为您的 height div 提供 #outer 属性。

#outer {
  /* ... */
  height: 100%;
}

最大高度不调整内部内容的大小

2 个答案: