CSS - 具有高度和最大高度的div的行为

If you have a div:

如果你有一个div:

<div id="test">
  <img src="http://..." />
</div>

With CSS:

#test {
  height: x;
  max-height: x + y;
  overflow: auto;
}

Is it safe to assume that the div will always grow past its initial height of x and stop growing (and start scrolling) at x + y as the image with height x + y + z loads?

是否可以安全地假设div总是超过其x的初始高度并且在x + y处停止增长(并开始滚动),因为高度为x + y + z的图像会加载?

If not, how would I go about achieving this behaviour consistently across modern browsers?

如果没有,我将如何在现代浏览器中始终如一地实现此行为?

1 个解决方案

#1

no, you need to use min-height instead of height.

不,你需要使用最小高度而不是高度。

height will set a fixed height and the container will not grow or shrink.

高度将设置固定高度,容器不会增长或缩小。

min-height will set a minimum height and max-height a maximum height, the container will then grow and shrink between those 2 points and the overflow auto will apply when its greater than the max-height.

最小高度将设置最小高度,最大高度设置为最大高度,然后容器将在这两个点之间增长和收缩,当溢出自动大于最大高度时,将应用溢出自动。

#1