我的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轴上变得更短时,可伸展元素的高度会降低,直到它们各自达到足够大以适合它们各自包含的内容的点,并且它们赢了之后再缩短。
答案 0 :(得分:1)
我认为您需要使用javascript执行此操作。基本上当窗口加载时,您需要找到每个可伸展元素的所有内容的高度。然后你只需要使用javascript将每个stretchchable-element的min-height设置为该值。