Full screen div with jquery

This is just a simple script to set the height of a container to the height of the browser window, I have also updated the script so it will work when the browser is re-sized. This script is intended to be used on an inner container, if you are looking to make the background full-screen just use CSS3 background-size:cover

Javascript

// Set container min-height function
function resizeWindow(e) {
    // Get window height
    var windowHeight = $(window).height();
    // Check if window height is larger than your required minimum height
    if(windowHeight >= 760) {
        // Set selector min-height to the window height
        $('.full-height').css('minHeight', windowHeight);
    }
}

// Set height on load
resizeWindow();

// Update height on window resize
$(window).bind('resize', resizeWindow);

 

CSS

Combine this script with some fancy CSS3 and you can create a full screen background

.full-height { 
    width:100%;
    background-image: url('../images/my-image.jpg');
    background-size: cover;
}