How to put the container height as the window size

That's my problem : some section of my website are not so long (in height term) and I like to extend the container until the bottom of the screen. The problem is that the window size could be different for each computer (due to the monitor resolution). So tricks like min-height will fail. How can I should try? With javascript? Or maybe position absolute+div clear and extend the container? Any helps would be appreciated!

开发者_运维问答I mean : the background color must get the whole screen on this example.

html,body {
    height:100%;
    padding:0;
}
#container {
    min-height:100%;
}

Working demo: http://jsfiddle.net/AlienWebguy/cruT5/5/

You can use the 100% value to solve this or JavaScript. Instead of writing some long stories I would advise you check this out...

Make Iframe to fit 100% of container's remaining height

I've used the following to get the dimensions when working with similar requirements:

// You can just copy and paste this function:

function getViewportDimensions() {

    var viewport = {};

    // the more standards compliant browsers (mozilla/netscape/opera/IE7) use window.innerWidth and window.innerHeight

    if (typeof window.innerWidth != 'undefined') {
        viewport.Width = window.innerWidth;
        viewport.Height = window.innerHeight;
    }

    // IE6 in standards compliant mode (i.e. with a valid doctype as the first line in the document)

    else if (typeof document.documentElement != 'undefined' && typeof document.documentElement.clientWidth != 'undefined' && document.documentElement.clientWidth != 0) {
        viewport.Width = document.documentElement.clientWidth;
        viewport.Height = document.documentElement.clientHeight;
    }

    // older versions of IE

    else {
        viewport.Width = document.getElementsByTagName('body')[0].clientWidth;
        viewport.Height = document.getElementsByTagName('body')[0].clientHeight;
    }

    return viewport;
}

Then you can use it like this:

// Obviously, you'll need to include jQuery...

function resizeViewportItems() {

    var viewport = getViewportDimensions();

    $('#some-element').css('height', viewport.Height);
    $('#another-element').css('width', viewport.Width);
}