Question

Im running in to a weird issue with getting 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);
}

Answer 1

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%;
}