Height 100% 하는 방법
본문
코딩하다가 궁금한 사항입니다.
div일때 height 100%를 하고싶은데.. ㅇdiv는 잘안되는경우가 많아요..
어떤방법을 사용해야 깔끔할까요
position:absolute -> 해봤어요.
display:table - > display:table-middle 도 해봤어요
위에 두사항은 되는 경우와 안되는 경우가 있다보니..
이방법은 정확하게 된다는 경우가 있을까요?
할때마다 달라서....요
답변 2
height:100% 주시는거 위에서부터 100%가 설정이 되어 있어야 합니다.
그게 아니시면 자바스크립트로 강제로 화면에 높이를 측정해서 주실수도 있긴 합니다.
height 값은 % 로 할때 절대값이 아닌 상대 값입니다.
즉, 상위에서 할당된 값이 있어야 적용되는거죠.
하지만 비슷하게 구현할수는 있습니다.
<div style="position:relative;width:500px;background:#fff100;">
<div style="position:absolute;left:0px;top:0px;width:100%;padding-bottom:100%;background:#cc0000;">
이 엘리먼트는 높이가 500px 이 됩니다.
</div>
</div>
만약 상위 개체가 아닌 현재 body 기준이라던가
윈도우 기준으로 100% 로 꽉 채우고 싶으시면
<div style="position:relative;width:500px;padding-bottom:100%;background:#fff100;">
<div style="position:absolute;left:0px;top:0px;width:100%;height:100%;background:#cc0000;">
이 엘리먼트는 높이가 100% 가 됩니다.
</div>
</div>
상위 엘리먼트에 적용해주시면됩니다.
