jquery get document width

Im running in to a weird issue with gettin开发者_如何转开发g the width of the document. Im using $(document).width() to get the width both on $(window).load and $(window).resize, my problem occurs when the browser is open full screen then resized (shrank) to a width where the content requires you to scroll horizontally to see all the content. At the point in which you need to scroll my header and footer divs just end. I would like them to go 100% of the document width. The problem fixes itself when i refresh the page. Is there a solution that allows a browser to shrink when resizing the window and updates the header and footer divs? This is what i have so far and its not working.

$(window).load(function() {
    resize_me();
});
$(window).resize(function() {
    resize_me();
});
function resize_me() {
    var doc_width = $(document).width();
    $('#header').width(doc_width);
    $('#footer').width(doc_width);
    console.log(doc_width);
}

try window.innerWidth, it should get you the size of the viewport.

No jQuery needed.

and honestly, why not just set their widths to 100% with css ???

#header, #footer {
    width:100%;
}

If I understand what you are saying correctly you could try the following in your stylesheet, which would be much more efficient than using JS.

#header, #footer{
    width : 100%;
}