min-height

翻译正在进行中。

{{CSSRef}}

min-height这个css属性能够设置一个元素的最小高度。这样能够防止{{cssxref(“ height”)}}属性的值小于min-height的设定值。

{{EmbedInteractiveExample("pages/css/min-height.html")}}

The element's height is set to the value of min-height whenever min-height is larger than {{cssxref("max-height")}} or {{cssxref("height")}}.

Syntax

/* <length> value */
min-height: 3.5em;

/* <percentage> value */
min-height: 10%;

/* Keyword values */
min-height: max-content;
min-height: min-content;
min-height: fit-content(20em);

/* Global values */
min-height: inherit;
min-height: initial;
min-height: unset;

Values

{{cssxref("<length>")}}
Defines the min-height as an absolute value.
{{cssxref("<percentage>")}}
Defines the min-height as a percentage of the containing block's height.
auto
The browser will calculate and select a min-height for the specified element.
none
No limit on the size of the box.
max-content
The intrinsic preferred min-height.
min-content
The intrinsic minimum min-height.
fit-content({{cssxref("<length-percentage>")}})
Uses the fit-content formula with the available space replaced by the specified argument, i.e. min(max-content, max(min-content, argument)).

Formal definition

{{cssinfo}}

Formal syntax

{{csssyntax}}

Examples

Setting min-height

table { min-height: 75%; }

form { min-height: 0; }

Specifications

Specification Status Comment
{{SpecName('CSS4 Sizing', '#width-height-keywords', 'min-height')}} {{Spec2('CSS4 Sizing')}}
{{SpecName('CSS3 Sizing', '#width-height-keywords', 'min-height')}} {{Spec2('CSS3 Sizing')}} Adds the max-content, min-content, fit-content keywords.
{{SpecName('CSS2.1', 'visudet.html#min-max-heights', 'min-height')}} {{Spec2('CSS2.1')}} Initial definition.

Browser compatibility

{{Compat("css.properties.min-height")}}

See also

  • The box model, {{cssxref("box-sizing")}}
  • {{cssxref("height")}}, {cssxref("max-height")}}