Having a strange issue with determining the document width using $(document).width() during $(window).load and $(window).resize. The problem arises when the browser is initially full screen and then resized to a narrower width, causing content to require horizontal scrolling. When this occurs, the header and footer divs abruptly end instead of extending 100% of the document width. Only a page refresh resolves the issue. Is there a way to dynamically update the header and footer divs when the browser window is resized? Here is the code I have tried so far without success.
$(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);
}