Reference/CSS

min-height 속성은 요소의 최소 세로 크기를 설정합니다.

by @webs 2022. 02. 04.

min-height

박스 요소는 width와 height로 크기를 설정할 수 있으며, margin(바깥쪽 여백), padding(안쪽 여백), border(테두리)를 설정할 수 있습니다. width 속성은 크키를 설정하지만, 컨텐츠의 크기는 max-content, min-content, fit-content 속성을 통해 설정이 가능합니다.

특징	설명
기본값	min-height: none
적용	box
버전	CSS1
사용성	★★★☆☆

정의(Definition)

min-height 속성은 요소의 최소 세로 크기를 설정합니다.

비교(Compare)

width 속성은 요소의 가로 크기를 설정합니다.
max-width 속성은 요소의 최대 가로 크기를 설정합니다.
min-width 속성은 요소의 최소 가로 크기를 설정합니다.
height 속성은 요소의 세로 크기를 설정합니다.
max-height 속성은 요소의 최대 세로 크기를 설정합니다.
min-height 속성은 요소의 최소 세로 크기를 설정합니다.

문법(Syntax)

/* 기본 속성 */ 
min-height: 10px;        /* 단위 설정 */
min-height: 1em;        /* 단위 설정 */
min-height: 10%;        /* 퍼센트 설정 */

/* 키워드 속성 */ 
min-height: none;       
min-height: min-content;     
min-height: min-content;     
min-height: fit-content;    

/* 전역 속성 */
min-height: inherit;   /* 상속 */
min-height: initial;   /* 초기화 */
min-height: revert;    /* 원래대로 돌리기 */
min-height: unset;     /* 설정 해제 */

속성(Property)

속성값	값(예)	설명
none	min-height: none	요소의 최소 세로 크기를 설정하지 않습니다.
length	min-height: 200px	요소의 최소 세로 크기를 CSS 단위를 통해 설정합니다.
percentage	min-height: 200%	요소의 최소 세로 크기를 %를 통해 설정합니다.
max-content	min-height: max-content	요소의 세로 크기를 콘텐츠를 기준으로 최대로 설정합니다.
min-content	min-height: min-content	요소의 세로 크기를 콘텐츠를 기준으로 최소로 설정합니다.
fit-content	min-height: fit-content	요소의 세로 크기를 콘텐츠를 기준으로 설정합니다.

예제1(Sample)

박스 요소 (bakcground, width, height, margin, padding, border)

background

width(px)

height(px)

margin(px)

padding(px)

border(px)

.box {
    background-color: #a2cbfa;
    width: 200px;
    height: 200px;
    margin: 0px;
    padding: 0px;
    border: 0px solid #a2cbfa;
}

예제1(Sample)

박스모델의 크기를 설정한 예제입니다.

어렸을 때부터 나만의 공간을 만드는 것을 좋아했고 나만의 다락방을 좋아했다. 단 한 사람이라도 내가 만든 공간 속에서 영감을 받거나 마음이 움직였으면 좋겠다. 서울에는 집이 없지만, 이곳에서는 나만의 집이 많다. 그 집은 비용도 들지 않고 언제든지 만들 수 있다. 나만의 공간을 마음것 만들 수 있다는 건 코딩에 엄청난 매력인거 같다. 그 한구석에 나만의 꿈을 설계하고 디자인을 하며 앞으로도 살고 싶다.

Since I was young, I liked to make my own space and I liked my own attic. I hope that even one person will be inspired or moved in the space I created. I don't have a house in Seoul, but I have a lot of my own houses here. The house can be built at any time without cost. I think being able to create my own space is a great attraction for coding. I want to design and design my own dream in one corner and live in the future.

min-height: 250px; min-height: 90%; min-height: 30em; min-height: none; min-height: max-content; min-height: min-content; min-height: fit-content;

HTML

CSS

SCRIPT

<div class="box-wrap">
    <div class="box">
        <div>
            어렸을 때부터 나만의 공간을 만드는 것을 좋아했고 나만의 다락방을 좋아했다. 
            단 한 사람이라도 내가 만든 공간 속에서 영감을 받거나 마음이 움직였으면 좋겠다. 
            서울에는 집이 없지만, 이곳에서는 나만의 집이 많다. 
            그 집은 비용도 들지 않고 언제든지 만들 수 있다. 
            나만의 공간을 마음것 만들 수 있다는 건 코딩에 엄청난 매력인거 같다. 
            그 한구석에 나만의 꿈을 설계하고 디자인을 하며 앞으로도 살고 싶다.
        </div>
    </div>
    <div class="box">
        <div>
            Since I was young, I liked to make my own space and I liked my own attic. 
            I hope that even one person will be inspired or moved in the space I created. 
            I don't have a house in Seoul, but I have a lot of my own houses here. 
            The house can be built at any time without cost. 
            I think being able to create my own space is a great attraction for coding. 
            I want to design and design my own dream in one corner and live in the future.
        </div>
    </div>
</div>

#sample1 .box-wrap {
    display: flex;
}
#sample1 .box-wrap .box {
    width: 49%;
    background-color: #cae3ff;
    padding: 10px;
    margin-right: 2%;
}
#sample1 .box-wrap .box span {
    border: 1px solid #64acff;
}

//javascript none

호환성(Compatibility)

						6	7	8	9	10	11
min-height	○	○	○	○	○	○	○	○	○	○	○	○	○	○
max-content	○	○	○	○	○	❌	❌	❌	❌	❌	❌	○	○	○
min-content	○	○	○	○	○	❌	❌	❌	❌	❌	❌	○	○	○
fit-content	○	○	○	○	○	❌	❌	❌	❌	❌	❌	○	○	○