在CSS（或通过jQuery）中设置最大高度和最小高度属性

我有一个简单但恼人的问题。我需要设置div元素的min-height和max-height。例如：min-height: 100px和max-height: 200px。我用div高度200px加载我的页面。如果我挤压我的浏览器窗口，该div将调整大小，当它遇到height=100px时，它将停止调整大小。在CSS（或通过jQuery）中设置最大高度和最小高度属性

当然在CSS中的min-height和max-height不起作用。：/

有人吗？

谢谢。

来源

2010-06-27 Pon

我不明白。什么不工作？如果将“height”设置为200px，则这不起作用。如果你使用“height”的相对值会发生什么？ – 2010-06-27 11:33:50

当我挤压浏览器窗口时，我不缩小到100px高度。它只停留在200px。 – Pon 2010-06-27 11:41:38

还设置高度。

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

来源

2010-06-27 11:34:11 Sjoerd

不工作：[它只是将高度设置为200px，当我挤压我的broser窗口时，它不缩小到100px。它只能保持200px的高度。＃wrap＃ \t background：＃ff0000; \t min-height：100px; \t max-height：200px; \t身高：100％; \t宽度：100％; } – Pon 2010-06-27 11:39:05

@Pon：确实有效。您的页面上必须有其他干扰信息。你能用一种不适合你的风格创建一个最小的例子吗？另外，你在测试什么浏览器？ – 2010-06-27 14:16:16

我有同样的问题。当缩小页面时，如果我将高度增加100％，它将保持最大高度，如果不是，则保持最小高度。我的div位置固定。 – majidarif 2016-11-17 03:18:34

最小高度始终会覆盖高度和最大高度，因此您不能只使用两者。

这是一种黑客，但你可以用媒体查询来做到这一点。如果这是你的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; 
    } 
}

来源

2016-02-18 19:34:30

您可以同时使用两者，但如果与最大高度或高度发生冲突，则最小高度将优先。 – Luke 2017-05-09 02:14:33

在CSS（或通过jQuery）中设置最大高度和最小高度属性

回答

相关问题