幅・高さ
min-height
要素の最小高さを指定する
| value | description |
|---|---|
100px | pxで幅を指定する |
20rem | remで幅を指定する |
100% | %で幅を指定する |
Demo
200px より小さい高さは、200px に丸められていることがわかります。
height: 100%;
min-height: 200px;
min-height: 200px;
height: 300px;
min-height: 200px;
min-height: 200px;
height: 200px;
min-height: 200px;
min-height: 200px;
height: 100px;
min-height: 200px;
min-height: 200px;
<div class="wrapper">
<div class="box box-1">height: 100%;<br />min-height: 200px;</div>
<div class="box box-2">height: 300px;<br />min-height: 200px;</div>
<div class="box box-3">height: 200px;<br />min-height: 200px;</div>
<div class="box box-4">height: 100px;<br />min-height: 200px;</div>
</div>
.box-1 {
height: 100%;
min-height: 200px;
}
.box-2 {
height: 300px;
min-height: 200px;
}
.box-3 {
height: 200px;
min-height: 200px;
}
.box-4 {
height: 100px;
min-height: 200px;
}
.box {
border-radius: 12px;
color: white;
font-family: monospace;
font-weight: 700;
display: flex;
padding: 8px 16px;
margin-bottom: 8px;
background: rgb(14, 165, 233);
white-space: nowrap;
flex: 1;
margin-right: 12px;
}
.wrapper {
display: flex;
align-items: flex-start;
height: 240px;
}
概要
要素の最小高さを指定します。heightが最小幅を下回っていた場合、min-heightの値が要素の幅となります。