매번 궁금했던 div 가로 100%
본문
안녕하세요~
매번 작업할때마다 궁금했던 점이 있는데요~
div 가로를 100%로 줬을때
어떨때는 정해진 영역에 꽉차게 딱 들어가다가
또 어떨땐 그 영역을 벗어나버리고
도대체 이렇게 달라지는 기준이 뭔지
모르겠어서 문의드려봅니다~!!!
가로 100% 준 div를 감싸고 있는 영역은 항상 100%로 주는데
그 감싸고 있는 영역에 또다른 조건이 있는건가요??
왜 똑같이 100%를 주는데
어떨땐 딱 맞게 들어가고 어떨땐 영역을 벗어나버리는지..ㅠㅠ
그냥 대충 맞춰놓고 쓰다가 오늘 작업하는데 또 벗어나서..아아악
오랜시간 궁금했던 부분이라서요~!!!
감사합니다!!!
답변 4
다른분들 답변과 마찬가지로 div 상위개체 기준입니다.
그러니 상위개채 중심으로 그냥 width:100%; 하면 되고요.... << 물론 이렇게 했겠죠.
내부가 더 크면 또한 박스가 늘어나게 되요.
그러니 그 내부 요소들의 크기를 %로 잡아주시면 되고요.
그게 완벽하면 그 문제는 발생하지 않아요.
그런데 내부에 크기를 반드시 고정값으로 주어야 하는게 있다면 overflow:hidden; 을 주면 되요.
css 코드로 정리하면.....
div.mom-box { width:100%; overflow:hidden; }
div.kid-box { width:100%; }
img.kid-image { width:50%; }
// 태그
<div class="mom-box">
<div class="kid-box">
내용 블라 블라..................................
</div>
<img src="url" class="kid-image">
</div>
이상입니다.
아마 padding 이나 margin 값 땜에 그럴거에요...
100% 라는건 상위개체의 내부 기준입니다.
상위 개체의 padding 값이 있을경우 그 안에 위치하고
또 현재 개체와 상위 개체의 position 값에 의해 좌우되기도 합니다.
현재 개체가 벗어날 경우에 margin 값을 0 으로 해보세요.
답변을 작성하시기 전에 로그인 해주세요.
