CODEWITHSUNDEEP
htmlcss
markzzz
markzzz

Reputation: 47945

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.

Upvotes: 0

Views: 4229

Answers (3)

DaMainBoss
DaMainBoss

Reputation: 2003

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

Upvotes: 1

SeanCannon
SeanCannon

Reputation: 77966

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

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

Upvotes: 4

Didaxis
Didaxis

Reputation: 8746

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);
}

Upvotes: 0

Related Questions