jQuery miscalculates div height on document ready

Question

I'm trying to change the section height after the page loads but it doesn't always work. I know my code to change the height is fine, and it works on window resize, just the initial call after document.ready doesn't always work.

var $window = $(window);

function wrap_element_link_mobile(object, path) {
    if ($(this).width() < 921 && !object.parent().is('a')) {
        object.wrap("<a href='" + path + "'></a>");
    } else if ($(this).width() > 920 && object.parent().is('a')) {
        object.unwrap();
    }
}

function resize_section() {
    var sectionMinHeight = $(window).height() - $('header').height() - $('footer').height() - 7;
    $('section').css('min-height', sectionMinHeight);
}

/* Called after document Load
================================ */

$(document).ready(function () {
    var $mainLogo = $('#main-logo');

    wrap_element_link_mobile($mainLogo, '/');
    resize_section();

    $window.resize(function () {
        wrap_element_link_mobile($mainLogo, '/');
        resize_section();
    });
});

After creating a console.log in the initial call I figured out it is getting called but for some reason it's not working.

*Edit screen of what I see

Notice the scroll bar, it goes away if I resize the window at all though and is the proper height.

http://jsfiddle.net/QHSm3/6/

Answer 1

The problem is with the tree logo!!! Here is what happens:

You did not specify width and height on the image. When you do that, the browser assumes a height of 0px on document.ready ¹. On document.ready, your script calculates the height of the header to be 60px and sets a min-height on section right away.

When the image loads, the height of header changes to 101px; at this point, the content (header, section, footer) grows by 41px hence the scrollbar.

¹ The results could be different if the image is loaded from cache.

You have two three options:

1: specify image dimensions in HTML source:

<img alt="Tree Logo" id="main-logo" src="logo.png" width="83" height="101"/>

Demo here, seems to work.

2: calculate heights on window.load instead of document.ready.

3. Better, use a CSS sticky footer (unless I misunderstood what you're trying to do).

Answer 2

This would be my pure html/css attempt.

http://jsfiddle.net/QHSm3/10/

section.pages {
    position: fixed;
    bottom: 0;
    left: 0;
    top: 102px;
    right: 0;
    overflow: auto;
}

I know it doesn't answer your question directly but I think stackoverflow should show the right path, and personally, I think that if there's a way of solving a layout problem with pure css, it should be done that way.

EDIT: Here's another attempt, it involves calc:

http://jsfiddle.net/QHSm3/11/

section.pages {
    position: absolute;
    left: 0;
    top: 102px;
    right: 0;
    min-height: calc(100% - 123px);
}

Please note that this will let ie8 behind: http://caniuse.com/#search=calc