Question

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

例如：min-height: 100px和max-height: 200px。我加载div高度为200px的页面。如果我挤压我的浏览器窗口，此div会调整大小，当它点击height=100px时，它会停止调整大小。

当然，CSS中的min-height和max-height无效。：/

任何？

感谢。

Answer 1

同时设置 height 。

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;

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

3 个答案: