如何设置 HTML 元素的默认高度并让它调整为仅使用 CSS 的固定容器高度

Question

假设我正在开发一个可重用的组件，呈现为 HTML 元素。任何人都可以在某个容器中渲染它。我事先不知道容器的样式：它可以有固定的高度，或者根本没有定义的高度（在这种情况下，容器可以灵活调整其内容）。

也就是说，当容器固定时，我的元素应该是灵活的，当容器灵活时，我的元素也应该是固定的。

我希望我的组件在这两种情况下都看起来不错。基本上，要求是：

1. 当容器具有固定高度时，我的元素应该适应它，就好像它有

   height: 100%

   一样。
2. 当容器没有固定高度时，我的元素应该领先并以某个默认高度进行渲染，就好像它有自己的固定高度一样

   height

   。
3. 外容器的样式我不控制。我只控制内部元素，任何人都可以在他们想要的地方渲染它。
4. 我想只使用CSS，而不使用JS。

我找到了一些建议使用

min-height

设置默认高度的解决方案。但它不起作用，因为当容器具有固定高度时，我希望我的元素能够适应它，即使它比默认值小。

默认高度既不是最小高度也不是最大高度——它只是一些合理的默认值。它可以是静态的，也可以作为 CSS 变量从外部提供 - 没关系。

Answer 1

假设组件元素的类为“my-element”。以下 CSS 应该可以完成这项工作：

.my-element {
  height: 500px;
  min-height: 100%;
  max-height: 100%;
}

这是它的工作原理...

A.当容器元素没有固定高度时（例如

height: auto

）。

该元素将具有

height

或

500px

。

min-height

和

max-height

的百分比值将被忽略。这是因为 CSS 中的相对高度仅适用于具有固定高度的容器 [1]。

B.当容器元素具有固定高度时（例如

height: 400px

）。

元素将与容器具有相同的高度。

min-height

和

max-height

属性将推翻

height

属性，因此它基本上会被忽略。

扩展解决方案

我们可以扩展此解决方案，以便通过 CSS 变量从外部更好地控制元素，并能够提供固定的最小/最大高度：

.my-element {
  --my-min-height: var(--min-height, 100px);
  --my-max-height: var(--max-height, 1000px);
  height: var(--default-height, 500px);
  min-height: max(100%, --my-min-height); /* stretch to 100% but not less than --my-min-height */
  max-height: min(100%, --my-max-height); /* shrink to 100% but not more than --my-max-height */
}

这实现了最佳的灵活性：

1. 在灵活容器（没有固定高度）中渲染时，该元素将具有默认高度

   500px

   ，可以通过

   --default-height

   变量覆盖。
2. 在固定高度容器中渲染时，该元素将调整其高度，但高度不会小于 100px 或大于 1000px（这两个值都可以通过

   --min-height

   和

   --max-height

   变量相应地覆盖） .

[1] 百分比高度 HTML 5/CSS