height: 100%가 css에서 먹히지 않았던건 그동안 왜 의문을 가지지 않았는지 모르겠다.
그런데 질문을 받았다. "왜 안돼요 width: 100%는 되는데?" 음 원래 그것만 쓰면 안되는데...? 왜지? 벙쩠던 순간이 있었다.
그래서 서칭했던 정보들에 대해 적어보려한다.
우선 " WHY IS NOT HEIGHT 100% WORKING? "
답은 퍼센트는 상대적 단위이고, 부모의 값의 영향을 받기 때문이다.
그렇니까 부모에게도 높이값을 지정해주면, 먹힌다.
근데 여전히 div의 width는 100%가 먹히는데 height가 먹히지 않는 이유는 의문이다.
요건 그런가보다 하고 넘어가야 할 것 같다. 언제나처럼 ㅋㅋㅋㅋ
그럼 height:100%를 적용시킬 방법에 대해 알아보자!
1. 부모를 찾아가 height : 100%를 설정해준다.
1 2 3 4 5 6 7 8 9 | <style> *{margin: 0;padding: 0;} html,body{height: 100%;} .content1{width: 100%;height:100%;background-color: aqua;} </style> <body> <div class="content1"></div> </body> | cs |
요렇게 height를 100%주길 원하는 요소 div.content1의 부모인 html과 body에게 height:100% 설정을 해주면,
자식 또한 부모의 높이를 받아 height:100%가 적용된다.
무진장 간단한 거 였다...또르르
'퍼블리싱 > HTML&CSS' 카테고리의 다른 글
| 구글 웹폰트 CDN 사용법 (0) | 2020.03.13 |
|---|---|
| [css]div 가로 중앙 정렬 하는 방법 (0) | 2019.03.06 |
| [CSS]float 이해하기 & clear하는 방법 (0) | 2019.02.26 |
| [CSS] 회원가입폼 체크박스 (2) | 2019.02.20 |
| [css]div 세로 가운데 정렬하는 방법 (0) | 2018.05.15 |
