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