>  기사  >  웹 프론트엔드  >  CSS에서 100vh는 무엇입니까

CSS에서 100vh는 무엇입니까

WBOY
WBOY원래의
2022-06-17 11:19:4712964검색

CSS에서 "100vh"는 크기가 "100"인 상대 길이 값을 나타내며 단위는 "vh"입니다. "vh"는 CSS의 상대 길이 단위로 창 높이에 상대적입니다. "100vh"는 요소의 높이가 현재 브라우저의 보기 창 높이, 즉 브라우저 내부의 가시 영역의 높이와 같다는 의미입니다.

CSS에서 100vh는 무엇입니까

이 튜토리얼의 운영 환경: Windows 10 시스템, CSS3&&HTML5 버전, Dell G3 컴퓨터.

CSS에서 100vh는 무엇인가요?

vh는 창의 높이에 상대적인 상대적 길이 단위입니다. 창은 vh의 100단위로 균등하게 나누어집니다. 즉, 1vh는 항상 창의 1%와 같습니다. 현재 창의 높이.

창은 vh 100단위로 균등하게 나누어져 있습니다. vh의 장점은 높이를 직접 얻을 수 있다는 점이지만, %를 사용하면 신체 높이를 설정하지 않으면 시각 영역의 높이를 정확하게 얻을 수 없습니다.

뷰포트는 브라우저 내부에 보이는 영역의 크기, 즉 작업 표시줄 제목 표시줄과 하단 도구 모음의 브라우저 영역 크기를 제외한 window.innerWidth/window.innerHeight의 크기를 말합니다.

따라서 100vh는 현재 브라우저 창의 높이, 즉 브라우저 내부에 보이는 영역의 높이와 같습니다.

높이 설정: 100vh, 요소에 콘텐츠가 없더라도 요소는 화면과 같은 높이로 늘어납니다.

확장 지식:

  • vh: 요소의 높이에 상대적 창은 100 단위의 vh로 균등하게 나뉩니다.

  • vw: 창의 너비를 기준으로 창은 100 단위의 vw로 나뉩니다.

  • vmax: 창의 너비 또는 높이를 기준으로 합니다. 창문 중 더 큰 쪽. 가장 큰 것은 100 단위의 vmax로 나뉩니다.

  • vmin: 뷰포트의 너비 또는 높이에 비해 작은 것입니다. 가장 작은 것은 vmin;

100개 단위로 균등하게 나누어집니다. (학습 영상 공유: css 영상 튜토리얼, html 영상 튜토리얼)

위 내용은 CSS에서 100vh는 무엇입니까의 상세 내용입니다. 자세한 내용은 PHP 중국어 웹사이트의 기타 관련 기사를 참조하세요!

성명:
본 글의 내용은 네티즌들의 자발적인 기여로 작성되었으며, 저작권은 원저작자에게 있습니다. 본 사이트는 이에 상응하는 법적 책임을 지지 않습니다. 표절이나 침해가 의심되는 콘텐츠를 발견한 경우 admin@php.cn으로 문의하세요.