html, body의 높이

• html, body의 높이는 기본적으로 auto이다.
• html, body는 display : block; 처럼 높이를 지정해주지 않으면 높이가 나타나지 않는다.
• html의 높이의 기준은 창을 기준으로 한다.
• html>height: 100% = 창전체 / body>height: 50% = 창전체의 절반이 된다.
• 즉 창 전체를 쓰고 싶을 때는 html, body에 창 100%를 주면된다.

html, body에 창 100%를 줘야하는 이유

• 기기마다 창의 전체 높이의 기준이 다르다.
• 하지만 html, body에 창 100%를 주게되면 창이 변하더라고 그 기기의 창의 100%를 쓰게 된다.
  

여러 엘리먼트에 쌓여있는 엘리먼트에 %로 높이 주기

여러 엘리먼트에 쌓여있는 엘리먼트에 hv로 높이 주기

• %로도 할 수 있지만 vh는 화면 높이를 하는 단위이기 때문에 100vh이면 전체 창 화면 크기가 된다.
• vh로 주게된다면 화면 크기의 영역이기 때문에 따로 html과 body에 100%를 안주어도 된다.
  

css 높이에 대한 자료 사이트

활용