CSS 100%가 적용이 안될 때
2017. 1. 5. 22:07ㆍTutorial & 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 |
---|