在 CSS 中设置 max-height 和 min-height 属性（或通过 jQuery）

Question

我有一个简单但烦人的问题。我需要设置 div 元素的

min-height

和

max-height

。

例如：

min-height: 100px

和

max-height: 200px

。我用 div 高度 200px 加载页面。如果我挤压浏览器窗口，这个 div 会调整大小，当它点击

height=100px

时，它会停止调整大小。

当然，CSS 中的

min-height

和

max-height

不起作用。 :/

有人吗？

谢谢。

Answer 1

还设置高度。

min-height: 100px;
max-height: 200px;
height: 100%;

Answer 2

最小高度总是覆盖高度和最大高度，所以你不能同时使用两者。

这是一种黑客攻击，但您可以通过媒体查询来做到这一点。如果这是您的 HTML：

<div id="myDiv"></div>

然后将其添加到您的CSS中：

#myDiv{
    height:200px;    
}
@media screen and (max-height: 200px) {
    #myDiv {
        height:99vh; /*Set this with trial and error because it depends on your margins*/
    }
}
@media screen and (max-height: 100px) {
    #myDiv {
        height:100px;
    }
}

Answer 3

尝试

min-height: 100px;
max-height: 200px;
height: 100vh;

Answer 4

只需使用 高度：100vh； 最小高度：适合内容；