Question

The intent of this script is to make a DIV that is 100% of the page height minus the top section.

Here’s the page:

http://nerdi.net/playground/kev/indexNEW.html

Here it is stripped down on jsFiddle, where it appears to be working.

http://jsfiddle.net/JVKbR/94/

For me, (on Chrome and FF) the scrollable div (.mid-col-main) only becomes scrollable upon resizing the window (Maximize, drag from corner, etc)

Any idea what I’m doing wrong?

EDIT: Jasper and Davin’s solution both work. Thank you.

Answer 1

You need to wait for the DOM to be ready, basically you were running the code too soon and div.mid-col-main is not available yet:

$(function () {
    var midColTopHeight = $("div.mid-col-top").height(),
        $window         = $(window),
        $midColMain     = $('div.mid-col-main');
    $window.resize(function(){
        $midColMain.height(($window.height() - midColTopHeight));
    }).trigger('resize');
});

Here I have placed your binding code inside a document.ready event handler and also triggered a resize event on the window element. I also optimized your code a bit to cache things that don’t change (you don’t need to select the same element every resize event).

Instead of running this code in a document.ready event handler, you could put this code at the end of the HTML document (just before the closing </body> tag), that way the element you want to target will be available.