방금 새롭고 드문 CSS 단위에 대해 배웠습니다. vh및 vw각각의 뷰포트의 높이와 폭의 비율을 측정한다.
Stack Overflow 에서이 질문을 보았지만 단위가 더 비슷해 보였습니다.
대답은 구체적으로 말합니다
vw 및 vh는 각각 창 너비와 높이의 백분율입니다. 100vw는 너비의 100 %, 80vw는 80 % 등입니다.
이것은 %유닛 과 똑같은 것처럼 보이며 더 일반적입니다.
개발자 도구에서 값을 vw / vh에서 %로 또는 그 반대로 변경하려고 시도했지만 동일한 결과를 얻었습니다.
둘 사이에 차이가 있습니까? 그렇지 않다면 왜이 새로운 부대가 소개 CSS3되었습니까?
답변
100%100%아무 높이나 될 수 있습니다 . 내가 부모가있는 경우 예를 들어, div의 1000px높이, 그리고 아이 div에 있습니다 100%높이를 그 아이는 div이론적으로, 뷰포트의 높이보다 훨씬 작은 뷰포트, 또는의 높이보다 훨씬 키가 될 수있다 이가더라도 div설정되어 100%높이 .
내가 대신 그 자식 한 경우 div에 세트를 100vh, 그것은 것입니다 만 채워 100%뷰포트의 높이 , 그리고 반드시 부모 div.
body,
html {
height: 100%;
}
.parent {
background: lightblue;
float: left;
height: 200px;
padding: 10px;
width: 50px;
}
.child {
background: pink;
height: 100%;
width: 100%;
}
.viewport-height {
background: gray;
float: right;
height: 100vh;
width: 50px;
}<div class="parent">
<div class="child">
100% height
(parent is 200px)
</div>
</div>
<div class="viewport-height">
100vh height
</div>답변
나는 질문이 매우 오래되었다는 것을 알고 @Josh Beam이 가장 큰 차이점을 해결했지만 여전히 또 다른 질문이 있습니다.
전체 뷰포트를 채우려는 <div>직접적인 자식 이 있다고 가정합니다 . 더 많은 내용을 추가하고 세로 스크롤 막대가 나타날 때까지 모두 동일하게 작동 합니다. 뷰포트의 일부로 스크롤 막대 의 계정 이보다 약간 큽니다 . 이 작은 차이로 인해 가로 스크롤 막대가 추가되어 (사용자가 여분의 너비를 조금보아야 함) 결과적으로 두 경우 모두 높이가 약간 다릅니다.<body>width: 100vw; height: 100vh;width: 100%; height: 100vh;vwwidth: 100vw;width: 100%;
부모 요소 크기가 문서 뷰포트 크기와 같더라도 사용할 요소를 결정할 때 고려해야합니다.
예:
사용 width:100vw;:
.fullviewport {
width: 100vw;
height: 100vh;
background-color: red;
}
.extracontent {
width: 100vw;
height: 20vh;
background-color: blue;
}<html>
<body>
<div class="fullviewport"></div>
<div class="extracontent"></div>
</body>
</html>사용 width:100%;:
.fullviewport {
width: 100%;
height: 100vh;
background-color: red;
}
.extracontent {
width: 100%;
height: 20vh;
background-color: blue;
}<html>
<body>
<div class="fullviewport"></div>
<div class="extracontent"></div>
</body>
</html>답변
귀하의 답변과 코드 예, @IanC에 감사드립니다. 그것은 많은 도움이되었습니다. 설명 : “사이드 바”를 작성할 때 “스크롤바”를 의미한다고 생각합니다.
스크롤 막대를 계산하는 뷰포트 단위에 대한 몇 가지 관련 토론은 다음과 같습니다.
W3C 사양 폭스 바겐, VH, VMIN, VMAX 단위 (이하 “뷰포트 비율 길이”) “어떤 스크롤바가 존재하지 않는 가정”말했다.
폭 : 100 %와 너비 : 100vw의 차이에 대한 @Nolonar의 의견에 따르면 Firefox는 100vw에서 스크롤 막대 너비를 뺍니다 . “I Can I Use”를 인용하면서 관찰합니다.
수 있습니까 사용은 , 아마도 사양 (?)와 긴장, 파이어 폭스가 아닌 다른 모든 브라우저가 현재 “잘못”세로 스크롤 막대를 포함한 폭 전체 페이지를 수 100vw을 고려했다.
답변
vw (뷰 폭) 및 vh (뷰 높이) 단위는 뷰포트 크기와 관련이 있으며 여기서 100vw 또는 vh는 뷰포트 너비 / 높이의 100 %입니다.
예를 들어, 뷰포트의 너비가 1600 픽셀이고 무언가를 2vw로 지정하면 뷰포트 너비의 2 % 또는 32px에 해당합니다.
% 단위는 항상 현재 요소의 부모 요소 너비를 기준으로합니다
답변
반드시 제기되지 않은 차이가 있습니다. 100vw는 스크루 바의 너비를 포함하고 100 %는 포함하지 않습니다. 작은 차이이지만 디자인을 할 때 중요합니다.
답변
