CODEWITHSUNDEEP
jquery
Guy
Guy

Reputation: 357

JQUERY: Resize div to window width

I am trying to force the width of a div to the width of a browser window. So that even if the window is resize the adjusts it's width.

I have been researching for about an hour and have found odd bits and pieces such as .resize() but can't find anything which works.

Upvotes: 6

Views: 59691

Answers (4)

James Johnson
James Johnson

Reputation: 46047

Without a container limiting the width, a div should span the width of the browser window by default. You can explicitly set the width to 100%, but that shouldn't be necessary:

<div style="width:100%;">Hello world</div>

I think CSS is more appropriate here, but you can do this in jQuery like this:

$("#div1").width($(window).width());

To run the above code whenever the window is resized, you can do this:

$(window).resize(function(){
    $("#div1").width($(window).width());
});

Here's a jsFiddle. For the sake of demonstration, the div expands on button click.

Upvotes: 12

Martin Borthiry
Martin Borthiry

Reputation: 5326

I think you can solve this using css width 100%

 div#full{ width:100%}

:)

Upvotes: -1

Charlie Brown
Charlie Brown

Reputation: 144

width: 100%;
display: block;

Optional:

position: absolute;

Upvotes: 1

dSquared
dSquared

Reputation: 9825

Try this:

<div id="full"></div>

<script type="text/javascript">
    function reSize($target){
        $target.css('width', $(window).width()+'px');
    }
    $(document).ready(function(){
        $(window).bind('resize', reSize($('#full')));
        $(window).trigger('resize');
    });
</script>

I hope this helps!

Upvotes: 1

Related Questions