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

时间:2017-05-31 01:13:10

标签: html css layout resize viewport

我的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轴上变得更短时,可伸展元素的高度会降低,直到它们各自达到足够大以适合它们各自包含的内容的点,并且它们赢了之后再缩短。

1 个答案:

答案 0 :(得分:1)

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