• 카테고리

    질문 & 답변
  • 세부 분야

    웹 개발

  • 해결 여부

    미해결

min-height관련 질문드립니다!

20.09.17 21:47 작성 조회수 1.02k

1

항상 코딩함에 있어서 부모에게 높이를 안주면 자식이 높이를 못가지는 문제가 생기는데

보통 html,body에 100%를 주면서 해결하더라구요

근데 상황따라 이게 잘 안될때가 있던데 min-height: 100vh와 body height:100%를 같이 먹이면 자식들 컨텐트의 크기에 상관없이 전체를 덮을 수 있을까요?

https://qastack.kr/programming/6654958/make-body-have-100-of-the-browser-height

여기서도 해결 방법이 다양하게 나열되어있는거 같던데 보통 잘 안되는게 많더라구요 ㅠ

답변 1

답변을 작성해보세요.

1

100vh는 부모 엘리먼트가 뭐든 상관없이 무조건 뷰포트 높이(일반적으로 브라우저 높이)로 인식하기 때문에
vh를 지원하는 브라우저라면 확실하게 보장됩니다. 다만 기기 종류나 브라우저에 따라 생겼다 사라지는 브라우저 메뉴영역으로 인해 스크롤바가 살짝 생길 가능성도 있어서 그 부분을 따로 처리해야하는 경우가 있을 수 있습니다(이런 것들은 브라우저 업데이트에 의해 자동으로 해결되는 경우도 있어서, 타겟 브라우저별로 살펴보는 수 밖에 없습니다).

min-height, height를 이용한 방법도 사이드이펙트를 발생시킬만한 다른 요인이 없다면 안되는 경우를 못본 것 같습니다.
만약 안된다면 다른 곳에서 html이나 body의 높이를 따로 설정하고 있지 않은지 체크해 보세요^^