Imagine you have a fixed or absolutely positioned element:
<div>
This is my fixed div.
</div>
With the CSS styling as follows:
div:first-of-type {
background-color: red;
position: fixed;
top: 20px;
left: 20px;
right: 20px;
bottom: 20px;
}
To determine the width, you can use the following JavaScript code:
$(function() {
$(window).resize(function() {
var $myFixedDiv = $('div:first');
console.log($myFixedDiv.width()); //$myFixedDiv.innerWidth(), $myFixedDiv.outerWidth()
});
});
However, both Firefox and Chrome may report a width of 0 when resizing the window.
How can one accurately determine the true width of the element?