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
width: 100%;
display: block;
Optional:
position: absolute;
I think you can solve this using css width 100%
div#full{ width:100%}
:)
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.
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!