CSS 단위-vh / vw와 %의 차이점은 무엇입니까?

138

방금 새롭고 드문 CSS 단위에 대해 배웠습니다. vh및 vw각각의 뷰포트의 높이와 폭의 비율을 측정한다.

Stack Overflow 에서이 질문을 보았지만 단위가 더 비슷해 보였습니다.

VW 및 VH 장치의 작동 방식

대답은 구체적으로 말합니다

vw 및 vh는 각각 창 너비와 높이의 백분율입니다. 100vw는 너비의 100 %, 80vw는 80 % 등입니다.

이것은 %유닛 과 똑같은 것처럼 보이며 더 일반적입니다.

개발자 도구에서 값을 vw / vh에서 %로 또는 그 반대로 변경하려고 시도했지만 동일한 결과를 얻었습니다.

둘 사이에 차이가 있습니까? 그렇지 않다면 왜이 새로운 부대가 소개 CSS3되었습니까?

css viewport-units

— 리차드 해밀턴
소스

7

vw / vh는 부모에 대한 종속성을 제거하고 뷰포트 크기에 따라 크기를 조정할 수 있습니다.

— 스티커

2

동료 독자 여러분, IanC의 답변으로 하루를 절약 할 수 있습니다. 반드시 확인하십시오.

— Skippy le Grand Gourou

167

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>

스 니펫 확장

— 조쉬 빔
소스

부트 스트랩 "행"에 중첩 된 사이드 바가 있으며 높이를 100 % 설정 한 후에도 전체 페이지 크기를 만들 수 없었습니다. 나를 위해 일한 것은 100vh

— raghav710 5

27

나는 질문이 매우 오래되었다는 것을 알고 @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
소스

2

CSS body { overflow: hidden }로 인해 스크롤바가 표시되지 않습니다.

— Dave F

2

귀하의 답변과 코드 예, @IanC에 감사드립니다. 그것은 많은 도움이되었습니다. 설명 : "사이드 바"를 작성할 때 "스크롤바"를 의미한다고 생각합니다.

스크롤 막대를 계산하는 뷰포트 단위에 대한 몇 가지 관련 토론은 다음과 같습니다.

W3C 사양 폭스 바겐, VH, VMIN, VMAX 단위 (이하 "뷰포트 비율 길이") "어떤 스크롤바가 존재하지 않는 가정"말했다.

폭 : 100 %와 너비 : 100vw의 차이에 대한 @Nolonar의 의견에 따르면 Firefox는 100vw에서 스크롤 막대 너비를 뺍니다 . "I Can I Use"를 인용하면서 관찰합니다.

수 있습니까 사용은 , 아마도 사양 (?)와 긴장, 파이어 폭스가 아닌 다른 모든 브라우저가 현재 "잘못"세로 스크롤 막대를 포함한 폭 전체 페이지를 수 100vw을 고려했다.

— 슬랙 언더 토우
소스

1

vw (뷰 폭) 및 vh (뷰 높이) 단위는 뷰포트 크기와 관련이 있으며 여기서 100vw 또는 vh는 뷰포트 너비 / 높이의 100 %입니다.

예를 들어, 뷰포트의 너비가 1600 픽셀이고 무언가를 2vw로 지정하면 뷰포트 너비의 2 % 또는 32px에 해당합니다.

% 단위는 항상 현재 요소의 부모 요소 너비를 기준으로합니다

0

반드시 제기되지 않은 차이가 있습니다. 100vw는 스크루 바의 너비를 포함하고 100 %는 포함하지 않습니다. 작은 차이이지만 디자인을 할 때 중요합니다.

1

IanC의 대답은 그렇지 않습니다. "vw는 뷰포트의 일부로 스크롤바를 설명하므로 width : 100vw; width : 100 %보다 약간 큽니다."

— j08691