DIV 너비를 창에 맞게 확장시키는 방법(CSS/jQuery)

하위 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)는 너비를 설정합니다(참고).

width in jQuery

또 다른 방법으로 다음과 같은 스크립트를 생각해볼 수 있습니다.

window.onresize = function(event) {
var bWidth = $("body").width();
$(".child_div").width(bWidth);
}
Source: Stackoverflow

이 스크립트는 body 너비를 받아와서 .child_div의 너비로 설정합니다. jQuery의 width 메소드는 여기를 참고하세요.

Reference:

참고:

일부 글에 제휴 링크가 포함될 수 있으며 파트너스 활동으로 일정액의 수수료를 받을 수 있습니다.

댓글 남기기

이메일 주소는 공개되지 않습니다. 필수 필드는 *로 표시됩니다