html - How does one get the width of an absolute/fixed element with jquery/js, on resize? -

lets have fixed or absolute positioned element:

<div>    fixed div. </div> 

with following css:

div:first-of-type {     background-color: red;     position: fixed;     top: 20px;     left: 20px;     right: 20px;     bottom: 20px; } 

you can figure out width via:

$(function() {     $(window).resize(function() {         var $myfixeddiv = $('div:first');          console.log($myfixeddiv.width()); //$myfixeddiv.innerwidth(), $myfixeddiv.outerwidth()      });  }); 

however, when resize window, width reported both firefox , chrome 0.

how 1 figure out true width is?

you take window's width , minus 40 both axis.

var width = $(window).width()-40; var height = $(window).height()-40; 

then rather using css top, left, bottom , right set width think unreliable in long term set div's width js

var mydiv = $('#mydiv'); mydiv.width = width; mydiv.height = height;