StackOverflow2013

Note that there are some explanatory texts on larger screens.

plurals

POHeight appears different between calculation and assignment
text
Body
copied!<p>I'm currently working on a full screen website. It has a main Content section, a header and a navigation bar. My goal is to have a fixed-height header and navigation, as well as a dynamically-fitting content. I've been working on the project for a couple of days know and my resizing algorithm worked fine until now:</p> <pre><code>var resizeBg = function() { var newHeight = $(window).innerHeight(); console.log($(window).innerHeight()); console.log(newHeight); newHeight -= $("#navBar").height(); console.log(newHeight); newHeight -= $("#mainHeader").height(); console.log(newHeight); $("#mainContent").css("height", newHeight + "px"); }; $(window).load(resizeBg); $(window).resize(resizeBg); </code></pre> <p>The log says:</p> <pre><code>21 21 -45 -128 </code></pre> <p>Now, the main content just disappears when using Mozilla Firefox 23.0.1. In other browsers everything works ok. Via debugging i found out that <code>newHeight</code> would turn negative. After some more debugging I was very confused by following result. <img src="https://i.stack.imgur.com/DII94.jpg" alt="A screenshot of Firebug's debugging surface"></p> <p>As shown in the picture, the variable <code>newHeight</code> has been set to <code>21</code> even though the value of <code>innerHeight</code> is <code>629</code>! Also, the Value <code>21</code> seems not to change when varying the window size (although <code>629</code> does).</p> <p>I have no idea what I have done to achieve this error or how to approach this problem. </p>

Querying!

Guidance

An individual column

Larger individual text columns get their own page to allow for proper reading.

SQuiL has stopped working due to an internal error.

If you are curious you may find further information in the browser console, which is accessible through the devtools (F12).

Reload