CSS 단위-vh / vw와 %의 차이점은 무엇입니까?
방금 새롭고 흔하지 않은 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이 가장 큰 차이점을 해결했지만 여전히 또 다른 질문이 있습니다.
Suppose you have a <div>, direct child of <body> that you want filling the whole viewport, so you use width: 100vw; height: 100vh;. It all works just the same as width: 100%; height: 100vh; until you add more content and a vertical scrollbar shows up. Since the vw account for the scrollbar as part of the viewport, width: 100vw; will be slightly bigger than width: 100%;. This little difference ends up adding a horizontal scrollbar (required for the user to see that little extra width) and by consequence, the height would also be a little different on both cases.
That must be taken into consideration when deciding which one to use, even if the parent element size is the same as the document viewport size.
Example:
Using 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>Using 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>the vw (view-width) and vh (view-height) units are relational to the view-port size, where 100vw or vh is 100% of the view-port's width/height.
For example, if a view-port is 1600px wide, and you specify something as being 2vw, that will be the equivalent of 2% of the view-port width, or 32px.
% unit is always based on the parent element width of the current element
Thank you for your answer and code example, @IanC. It helped me a lot. A clarification: I believe you meant "scrollbar" when you wrote "sidebar."
Here are some related discussions about viewport units counting scrollbars that I also found helpful:
The W3C spec for the vw, vh, vmin, vmax units (the "viewport percentage lengths") says "any scrollbars are assumed not to exist".
Apparently Firefox subtracts scrollbar width from 100vw, as @Nolonar's comment at Difference between Width:100% and width:100vw? observes, citing "Can I Use".
Can I Use, perhaps in tension with the spec (?), says all browsers other than Firefox currently "incorrectly" consider 100vw to be the entire page width including the vertical scroll bar.
There is a difference that has not necessarily been raised. 100vw includes the width of the scrool bar, while 100% does not include it. It is a small difference, but important when doing design.
참고URL : https://stackoverflow.com/questions/31039979/css-units-what-is-the-difference-between-vh-vw-and
'program tip' 카테고리의 다른 글
| JPQL IN 절 : Java-Arrays (또는 Lists, Sets…)? (0) | 2020.08.19 |
|---|---|
| 파이썬 문자열에서 하위 문자열의 첫 번째 발생을 어떻게 찾을 수 있습니까? (0) | 2020.08.19 |
| SQL 쿼리를 테스트하는 가장 좋은 방법 (0) | 2020.08.18 |
| std :: tie는 어떻게 작동합니까? (0) | 2020.08.18 |
| 수정 된 폐쇄에 대한 액세스 (2) (0) | 2020.08.18 |