tailwind css로 뷰포트의 높이를 채우는 법

Question

나는 Tailwind CSS를 시험해보고 뷰포트의 높이를 채우는 방법을 알고 싶다.

<div class="flex items-stretch bg-grey-lighter"> 
    <div class="flex-1 text-grey-darker text-center bg-grey-light px-4 py-2 m-2">1</div> 
    <div class="flex-1 text-grey-darker text-center bg-grey-light px-4 py-2 m-2">2</div> 
    <div class="flex-1 text-grey-darker text-center bg-grey-light px-4 py-2 m-2">3</div> 
</div> 

가 어떻게이 화면 하단에 스트레칭해야합니까 워드 프로세서에서이 예제 HTML을 복용?

Answer 1

당신이 요소가 뷰포트의 모든 높이를 차지한다는 것을 의미하는 경우 신체의 함량은 전체 화면을 채우기 위해 너무 작은 경우, 나는 스트레치를 수직으로하는 인 flexbox을 사용,

100vh 

Answer 2

와 함께 작동합니다 더 작은 divs.

본문과 본문 div의 높이가 100 %인지 확인하고 플렉스 박스를 세로줄로 사용하고 플렉스 기준을 추가하여 수직 및 균등하게 펼칩니다.

html, body {height: 100%;} 

.flex { 
    display: flex; 
    height: 100%; 
    flex-direction: column; 
} 

.flex-1 { 
/* or flex-grow: 1; */ 
flex-basis: 33.33%; 
}