0

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.

markzzz
  • 47,390
  • 120
  • 299
  • 507

3 Answers3

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

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

AlienWebguy
  • 76,997
  • 17
  • 122
  • 145
  • +1 on this answer. @markzzz: Your JSFiddle does not contain all of AlienWebguy's code. [jsfiddle.net/cruT5/2/](http://jsfiddle.net/cruT5/2/). I don't like the vertical scroll-bars I'm seeing in Safari but that's another issue. – Sparky Jul 29 '11 at 21:23
  • 1
    YES. Try it before you dismiss it next time: http://jsfiddle.net/AlienWebguy/cruT5/5/ – AlienWebguy Jul 29 '11 at 21:23
  • Adding `margin:0; padding:0;` to `html,body{}` seems to solve that minor scroll-bar issue. – Sparky Jul 29 '11 at 21:25
  • AlienWebguy, curious if you know how far back with IE will this work? – Sparky Jul 29 '11 at 21:28
  • @sparky padding, yes - margin, I can't imagine why you'd need to reset that on the body. What element is going to be placed next to the body as a sibling which would require spacing by default? – AlienWebguy Jul 29 '11 at 21:29
  • I have no good explanation, other than "kitchen-sink reactionary". However, I've seen IE6 do stranger things. Not that I'd support IE6 but just making a point that I've seen stranger things. – Sparky Jul 29 '11 at 21:34
  • 1
    Who the hell voted this down? This is the best answer by far. – Sparky Jul 29 '11 at 21:38
1

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

Community
  • 1
  • 1
DaMainBoss
  • 2,035
  • 1
  • 19
  • 26
0

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);
}
Didaxis
  • 8,486
  • 7
  • 52
  • 89
  • 2
    -1 This is easily done without JavaScript, and not only is there is no JavaScript tag in the question, but you use JQuery sporadically. `document.getElementsByTagName('body')` could simply be replaced with `$('body')` – AlienWebguy Jul 29 '11 at 21:27
  • @AlienWebguy -If you actually read his question, he states that he is indeed open to a JavaScript solution. Also, what does sporadic use of jQuery have to do with the price of tea in china? I really don't appreciate your down vote considering it's pretty baseless... – Didaxis Jul 29 '11 at 21:32
  • 2
    Price of tea in china? WTF are you talking about? lol. My base was that this is a horrible and cluttered solution and you could shorten it significantly if you actually USED JQuery for all those selectors – AlienWebguy Jul 29 '11 at 21:41
  • If you're using jQuery, why aren't you just using [height()](http://api.jquery.com/height/) and [width()](http://api.jquery.com/width/) to get the viewport's dimensions cross-browser. Isn't that the whole point of jQuery? – Sparky Jul 29 '11 at 21:43
  • Yay you, you've enlightened me to the great universal mystery of $('body'). Here's a sarcastically awarded +1 – Didaxis Jul 30 '11 at 00:31