CSS | min-height 属性

简介

min-height 属性设置元素的最小高度，如果元素内容没有达到该高度，则元素的高度将被调整以包含其内容。

语法

selector {
  min-height: value;
}

• selector：CSS 选择器，指定要应用此属性的元素。
• value：一个数字，表示元素的最小高度。可以带有 px、em、vh、vw 这样的单位或百分数。

例子

1. 设置最小高度为 100 像素

div {
  min-height: 100px;
}

这将强制 div 元素的高度至少为 100 像素。如果内容超过了 100 像素，则高度会根据内容而增加。

2. 设置百分比的最小高度

div {
  min-height: 50%;
}

这将使 div 元素的最小高度为其包含块高度的 50%。如果实际内容高度小于此值，则元素高度将被自动调整。

3. 使用 calc 函数

div {
  min-height: calc(100% - 50px);
}

在这个例子中，使用 calc() 函数计算 div 元素的最小高度，高度等于包含块高度减去 50 像素，这是一种常用的响应式布局方法。

注意事项

• min-height 适用于所有元素，包括行内元素、内联块级元素、表格单元格等。
• 如果元素的 height 属性被显式设置为一个大于 min-height 值的值，则 min-height 属性无效。
• min-height 是一个 CSS 2.1 属性，已被所有现代浏览器支持。
• 在某些情况下，可能需要使用 min-height，而不是 height，以确保内容在垂直方向上正确地显示。例如，当使用一组类似表格的元素时，如果元素的高度不固定，则需要设置 min-height，以避免表格行在不同的浏览器中显示的方式不同。