我該怎么辦？ height：相對於視口；“在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將每個可拉伸元素的最小高度設置為該值即可。