하위 DIV(Child DIV)를 페이지 너비에 맞게 확장시키는 방법에 대해 간략히 살펴봅니다. 예를 들어 다음과 같은 HTML 코드가 있을 때,
<div class="container" style="width: 960px"> <div class="child_div" style="width: 100%; margin: 0 auto;"> 내용 </div> </div>
창 너비가 960px보다 클 경우에 child_div 클래스 요소가 창 너비에 맞게 확장되도록 하고 싶은 경우 우선 다음과 같은 형식으로 CSS 코드를 사용해봅니다.
.container { position: relative; } .child_div { position:absolute; left:0; right:0; } // Source: Stckoverflow
혹은 다음과 같은 코드를 사용해보시기 바랍니다.
.child_div { position: absolute; left: 0; width: 100%; }
jQuery로 구현할 경우 다음 스크립트를 사용할 수 있습니다.
$(".child_div").width($(window).width());
$( window ).width()는 브라우저의 Viewport 너비를 반환합니다. $("div").width()는 너비를을 반환합니다. 참고로 $(selector).width(value)는 너비를 설정합니다(참고).
또 다른 방법으로 다음과 같은 스크립트를 생각해볼 수 있습니다.
window.onresize = function(event) { var bWidth = $("body").width(); $(".child_div").width(bWidth); } Source: Stackoverflow
이 스크립트는 body 너비를 받아와서 .child_div의 너비로 설정합니다. jQuery의 width 메소드는 여기를 참고하세요.
댓글 남기기