StackOverflow2013

Note that there are some explanatory texts on larger screens.

plurals

POUsing Javascript to resize a div to screen height causes flickering when shrinking the browser window
text
Body
copied!<h1>The Background:</h1> <p>I tried to solve the StackOverflow question <a href="https://stackoverflow.com/questions/6837603/yet-another-html-css-layout-challenge-full-height-sidebar-with-sticky-footer">yet another HTML/CSS layout challenge - full height sidebar with sticky footer</a> on my own using jQuery. Because the sidebar in my case may be longer than the main content it matches the case of <a href="https://stackoverflow.com/questions/6837603/yet-another-html-css-layout-challenge-full-height-sidebar-with-sticky-footer#comment-8128008">comment 8128008</a>. That makes it impossible to have a sidebar longer than the main content and having a sticky footer without getting problems when shrinking the browser window.</p> <h1>The status quo:</h1> <p>I have a html page with a <code>div</code>, which is automatically stretched to fill the screen. So if there is empty space below the element, I stretch it downwards:</p> <p><img src="https://i.stack.imgur.com/ZMQMh.png" alt="The div is stretched to fill the screen"></p> <p>But if the browser viewport is smaller than the <code>div</code> itself, no stretching is done but the scrollbar shows up:</p> <p><img src="https://i.stack.imgur.com/4uu8S.png" alt="Small viewport: no resizing"></p> <p>I've attached jQuery to the window's resize event to resize the <code>div</code>, if the browser window is not to small and remove any resizing in the other case. This is done by checking if the viewport is higher or smaller than the <code>document</code>. If the viewport is smaller than the <code>document</code>, it seems like the content is larger than the browser window, why no resizing is done; in the other case we resize the <code>div</code> to fill the page. </p> <pre class="lang-js prettyprint-override"><code>if ($(document).height() > $(window).height()) { // Scrolling needed, page content extends browser window // --> No need to resize the div // --> Custom height is removed // [...] } else { // Window is larger than the page content // --> Div is resized using jQuery: $('#div').height($(window).height()); } </code></pre> <h1>The Problem:</h1> <p>Up to now, everything runs well. But if I shrink the browser window, there are cases, where the <code>div</code> should be resized but the <code>document</code> is larger than the <code>window</code>'s height, why my script assumes, that no resizing is needed and the <code>div</code>'s resizing is removed. </p> <p>The point is actually, that if I check the <code>document</code>'s height using Firebug after the bug appeared, the height has just the value is was meant to have. So I thought, the <code>document</code>'s height is set with a little delay. I tried to run the resize code delayed a bit but it did not help.</p> <p>I have set up a demonstration on <a href="http://jsfiddle.net/2yKgQ/23/" rel="nofollow noreferrer">jsFiddle</a>. Just shrink the browser window slowly and you'll see the <code>div</code> "flickering". Also you can watch the <code>console.log()</code> output and you will notice, that in the case of "flickering" the <code>document</code>'s height and the <code>window</code>'s height are different instead of being equal. </p> <p>I've noticed this behavior in Firefox 7, IE 9, Chrome 10 and Safari 5.1. Can you confirm it? </p> <p>Do you know if there is a fix? Or is the approach totally wrong? Please help me.</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