Question

作为初学者前端开发人员，我发现很难理解何时使用高度，最小高度和最大高度。

我正在阅读MDN关于max-height财产及其与height一起使用的文档。

根据文件，

max-height会覆盖高度，但是min-height会覆盖max-height。

但我得不到的是，如果我们有一个div，设置height和max-height，则height似乎优先。

例如：

HTML：

<div class="wrapper"> A text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text </div>

CSS：

.wrapper { width: 100px; background-color:red; height: 100px; max-height: 1000px; }

JSBin：https://jsbin.com/kovama/13/edit?html,css,output。

为什么max-height覆盖height？当我删除height属性时，div似乎只会增加内容。

此外，当声明min-height覆盖max-height时，只有当min-height实际上大于max-height时，这是正确的吗？我发现措辞有点令人困惑。

Answer 1

将min-height和max-height视为高度的最小和最大有效计算值。

所以如果你设置min-height：100px;和最大高度：1000px;元素的高度始终介于100和1000px之间。因此，如果您将高度设置为500px，那么该值将在允许的范围内，并将其用作实际高度。

但是如果你将高度设置为2000px，那么比不在允许的范围内，所以高度将减少到1000px，因此它在允许的范围内。

但是在px中设置max-height和height都没有多大意义。因为那时总是会使用最小的最大高度和高度。

正常使用是将％和px结合起来。

如果设置宽度：100％;最大宽度：700像素;然后你将宽度设置为可用空间的100％，但它应该更新超过700像素。

您也可以通过其他方式执行此操作：宽度：50％;最小宽度：500像素;这将占用可用空间的一半，但总是至少500像素。

Answer 2

如果您设置CREATE OR REPLACE FUNCTION get_all_usernames RETURN sys_refcursor IS l_sql VARCHAR2(4000); l_rc SYS_REFCURSOR; BEGIN FOR t IN (SELECT t.*, rank() over (order by owner) rnk FROM dba_tables t WHERE table_name = 'C_USERNAMES' ORDER BY owner) LOOP IF( t.rnk = 1 ) THEN l_sql := 'SELECT name, address FROM ' || t.owner || '.c_usernames'; ELSE l_sql := l_sql || ' UNION ALL ' || 'SELECT name, address FROM ' || t.owner || '.c_usernames'; END IF; END LOOP; OPEN l_rc FOR l_sql; RETURN l_rc; END;，则会在min-height上应用height的最低限制，div的{{1}}不能低于该最低身高。同样地，height将div的高度限制为不超过div上设置的高度。举个例子：

max-height

来自上述css，max-height的{{1}}可以是div { min-height: 500px; max-height: 1000px; }和height之间的任何内容（包括两者），实际高度（可见高度）将是根据其保留的内容自动调整此范围。现在看这个css -

div

使用上述css，500px 1000px默认设置为div { height: 600px; min-height: 500px; max-height: 1000px; }，如果内容较短，则div底部会显示空格，因为{ {1}}已修复为height，如果内容要展开600px，它会执行此操作，但它会仅扩展为div。

Answer 3

为了更好地说明这里有一些例子：

＆＃13;

.box {
   width: 50px;
   height: 50px;
   background: red;
   display: inline-block;
}

/* box1 will have the height 50px because it doesn't exceed 400px */
.box1 {
   max-height: 400px;
}

/* box2 will have the height 40px,
   so in this case max-height overrides the height property
   This happended because the height of the div was exeeding the maximum allowed
*/
.box2 {
   max-height: 40px;
}

/* box3 will have the height 80px
   This happens because we said that the minimum should be 80px
   so the height and max-height properties are ignored
*/
.box3 {
   max-height: 40px;
   min-height: 80px;
}

＆＃13;

<div class="box box1"></div>
<div class="box box2"></div>
<div class="box box3"></div>

＆＃13;

最大高度覆盖高度

3 个答案: