# 새로운 CSS Viewport Unit : svh, lvh, dvh

> Clean Markdown view of GeekNews topic #9791. Use the original source for factual precision when an external source URL is present.

## Metadata

- GeekNews HTML: [https://news.hada.io/topic?id=9791](https://news.hada.io/topic?id=9791)
- GeekNews Markdown: [https://news.hada.io/topic/9791.md](https://news.hada.io/topic/9791.md)
- Type: news
- Author: [xguru](https://news.hada.io/@xguru)
- Published: 2023-07-14T10:16:01+09:00
- Updated: 2023-07-14T10:16:01+09:00
- Original source: [ishadeed.com](https://ishadeed.com/article/new-viewport-units/)
- Points: 21
- Comments: 4

## Topic Body

- 뷰포트 너비/높이 기반으로 설정하는 것은 편하지만, `vh` 는 모바일에서 버그가 많음   
→ 뷰포트 사이즈가 브라우저의 주소바 UI를 포함하지 않기 때문  
- 100vh 는 모바일에서 전체 뷰포트 높이 만큼이 되어야 하지만, 스크롤시에 UI를 숨기는 사파리/크롬(안드로이드) 에서는 문제가 발생   
- 그래서 CSS 워킹 그룹이 새로운 단위를 소개 `svh`, `lvh`, `dvh`   
  - 'svh' Small Viewport : 주소바 UI가 축소되지 않은 상태의 뷰포트 높이   
  - 'lvh' Large Viewport : 주소바 UI가 축소된 상태의 뷰포트 높이   
  - 'dvh' Dynamic Viewport : svh / lvh 사이에서 동적으로 변화   
- `100dvh` 를 이용하면 최하단에 있는 버튼이 항상 표시되도록 설정 가능   
  - 하지만 성능 문제가 있을수 있으니 조심해야함

## Comments



### Comment 17453

- Author: hided62
- Created: 2023-07-19T11:21:16+09:00
- Points: 1

와! Firefox for Android에서 position:fixed, bottom: 0 할때 끔찍할 정도로 이상하게 동작하는 것들이 있었는데, 해결되나 확인해봐야겠네요.

### Comment 17318

- Author: tobyyun
- Created: 2023-07-14T14:44:35+09:00
- Points: 1

https://caniuse.com/viewport-unit-variants  
iOS는 15.4 부터, Android는 114부터 지원하네요

### Comment 17307

- Author: tomriddle7
- Created: 2023-07-14T11:23:37+09:00
- Points: 1

Viewport Unit이 너무 많아서 헷갈리기 시작하네요

### Comment 17304

- Author: carnoxen
- Created: 2023-07-14T10:28:22+09:00
- Points: 1

브라우저가 책임져야 할 문제인데 표준 그룹이 책임을 지는 아이러니...