我该怎么做“最小高度：内容高度;高度：相对于视口;”在CSS？

Question

我的HTML页面上有一些可伸缩的元素。

使用此CSS

.stretchable-element {
    height: 25%;
}

随着浏览器窗口的高度增加，可伸展元素变得更高。随着浏览器窗口的高度减小，可伸展元素变短。但是当浏览器窗口太短时，可伸缩元素中的内容将溢出。我有多个可伸缩的元素，所以我不能简单地设置一个固定的min-width。我想要实现的是这样的：

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

基本上，当浏览器窗口在y轴上变得更短时，可伸展元素的高度会降低，直到它们各自达到足够大以适合它们各自包含的内容的点，并且它们赢了之后再缩短。

Answer 1

我认为您需要使用javascript执行此操作。基本上当窗口加载时，您需要找到每个可伸展元素的所有内容的高度。然后你只需要使用javascript将每个stretchchable-element的min-height设置为该值。