-
Notifications
You must be signed in to change notification settings - Fork 22.4k
/
index.md
89 lines (64 loc) · 2.14 KB
/
index.md
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
69
70
71
72
73
74
75
76
77
78
79
80
81
82
83
84
85
86
87
88
89
---
title: min-height
slug: Web/CSS/min-height
page-type: css-property
browser-compat: css.properties.min-height
---
{{CSSRef}}
The **`min-height`** [CSS](/en-US/docs/Web/CSS) property sets the minimum height of an element. It prevents the [used value](/en-US/docs/Web/CSS/used_value) of the {{cssxref("height")}} property from becoming smaller than the value specified for `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
```css
/* <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;
min-height: fit-content(20em);
/* Global values */
min-height: inherit;
min-height: initial;
min-height: revert;
min-height: revert-layer;
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.
- `max-content`
- : The intrinsic preferred `min-height`.
- `min-content`
- : The intrinsic minimum `min-height`.
- `fit-content`
- : Use the available space, but not more than [max-content](/en-US/docs/Web/CSS/max-content), i.e `min(max-content, max(min-content, stretch))`.
- `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
```css
table {
min-height: 75%;
}
form {
min-height: 0;
}
```
## Specifications
{{Specifications}}
## Browser compatibility
{{Compat}}
## See also
- [The box model](/en-US/docs/Web/CSS/CSS_box_model/Introduction_to_the_CSS_box_model), {{cssxref("box-sizing")}}
- {{cssxref("height")}}, {{cssxref("max-height")}}