CSS의 height:100%와 height:100vh의 차이 (+width)

height: 100%

부모의 높이 값에 의존한다. 부모에게 height가 설정되어있어야한다

( 단위가 %일땐 부모의 값에서 높이를 상속받는다)

(height와 width는 상속받지 않는다 %라는 단위가 상속을 받을뿐이다)

height: 100vh

사용기기의 높이에 의존한다. 부모에게 height가 설정되어있지 않아도 된다

차이

height:100vh (현재화면 뷰포트기준)

height:100% (부모기준이다 그러므로 부모의 height가 지정되지 않으면 사용할수없다)

↑ 그래서 html,body 태그에도 height:100%를 사용하지 않으면 사용할수없는 경우가 많다

height:100%를 사용한 NG사례

NG사례

사례1

NG를 무리하게 수정한 경우

(부모인 html과 body에 height:100%을 줬다)

사례2

height:100vh를 사용한 OK사례

사례3 100vh를 사용하여 브라우저의 높이에 의존하는중

min-height: 100vh

현재 스크린의 화면을 최소 100%높이로 꽉 채운다는 의미로 사용된다 ( 즉 최소 화면을 100%로 유지한다는 뜻 )

min-h-[calc(100vh - 20px - 20px)] // tailwindcss의 예제

1.Width에 대해서

1. width를 px로 설정하는 경우 , 부모의 width보다 자식의 width가 큰 경우 자식요소가 밖으로 삐져나와서 무너진다. 그러므로 반응형 고려시 %가 좋다

2. width:100%라도 margin이 합해지면 width:100% +margin이 표현 되므로 레이아웃 무너지는 경우가 있다

그러므로 width는 아무것도 설정하지 않거나 width:auto라는 기본 설정을 해주면 된다

3. width의 default값은 width:auto이다. width:auto는 margin이 제외된 최대 width를 가지므로 2번의 문제는 고려하지않아도 된다

4. 즉 margin과 width:100%는 같이 사용하는것은 피하는게 좋다

(참조)

2.Width와 box-sizing의 content-box와 border-box에 대해서

- width 값에는 margin / padding / border가 포함되지 않는다 (*중요)

- 그러나 예외적으로 box-sizing가 content-box인가 border-box인가에 따라서 padding과 border는 width에 포함시킬수있다

content-box 는 width가 margin , padding , border를 포함하지않는다 (*중요) // 디폴트값

border-box는 width가 margin을 포함하지않는다. 그러나 padding , border을 포함한다 (*중요)

div {
  width: 100px;
  height: 100px;
  padding: 20px;
  margin: 20px;
  border: 5px solid red;
}

.content-box {
  box-sizing: content-box;
  /* 일반적인 디폴트 설정이며 width에 margin,padding,border는 포함되지 않는다 */
  /* width or height: 100px + (2 * 20px) + (2 * 5px) = 150px
     Content box width or height: 100px */
}

.border-box {
  box-sizing: border-box;
  
  /* width에 padding,border을 포함하는 설정이다. 그러나 margin은 포함하지 않는다 */
  /* width or height: 100px
     Content box width or height: 100px - (2 * 20px) - (2 * 5px) = 50px */
}