CSS 100%가 적용이 안될 때

2017. 1. 5. 22:07Tutorial & Training/CSS

728x90

CSS를 사용하다 보면 요소값에 % 적용을 하는경우가 상당수 많은데

100%를 이용해서 꽉차게하거나

혹은 div 등의 요소안에 다른 요소가없는데 사이즈를 가로는 되는데 세로사이즈가 안되는경우가 태반이다.


대처방안으로 display:table, display:table-row를 사용한다는데

이건 너무 부적절하다고 생각하고


우회방안으로

height:9999px;

overflow-y:hidden;


이런 방식도 존재하지만 이방법또한 옳지않다.


대처방안으로 존재하는것은

바로 Viewport를 이용하는 것이다.

vh와 vw가 있다.


1000px라는 값이 존재한다고 가정할때

1vh는 10px를 나타낸다.

100분의1이다.


상대적으로 뷰의 너비와 높이를 맞출수있다.

100%를 적용한다고 가정한다면

100vh를 이용하면 된다.




728x90

'Tutorial & Training > CSS' 카테고리의 다른 글

SVG CSS로 색상 변경하기  (0) 2021.07.26