html - 我如何在 CSS 中执行 "min-height: height of content; height: relative to viewport;"？

Question

我的 HTML 页面上有一些可拉伸(stretch)的元素。

使用这个 CSS

.stretchable-element {
    height: 25%;
}

随着浏览器窗口高度的增加，可伸缩元素会变高。随着浏览器窗口高度的降低，可拉伸(stretch)元素会变短。但是当浏览器窗口太短时，可拉伸(stretch)元素中的内容就会溢出。我有多个可拉伸(stretch)元素，所以我不能简单地设置一个固定的 min-width。我想要实现的是这样的:

.stretchable-element {
    height: 25%;
    min-height: just tall enough so the text inside this element will not overflow
}

基本上，当浏览器窗口在 y 轴上变短时，可拉伸(stretch)元素的高度将降低，直到它们各自达到一个点，在这个点上它们刚好大到足以容纳它们各自包含的内容，并且它们获胜在那之后变得更短。

Answer 1

我认为您需要使用 javascript 来完成此操作。基本上当窗口加载时，您需要找到每个可拉伸(stretch)元素的所有内容的高度。然后您只需使用 javascript 将每个可拉伸(stretch)元素的最小高度设置为该值。