How to make div#wrapper use the whole page vertically

  • Hello,

    I am using the sandbox theme to start making my own theme and would like to have the div#wrapper use the whole page in it’s height (vertically) in order to have the footer at the very bottom of the web browser and not in the middle of the browser in case the content is not so long.

    I tried a few different things in div#wrapper, like using “height: 100%” but that didn’t work at all. So does anyone have a trick on how to do this ?

    Many thanks
    Regards

Viewing 2 replies - 1 through 2 (of 2 total)
  • sjoerd_oudman

    (@sjoerd_oudman)

    Hi mlnosp,

    I have had your problem as well, but the solution (which i haven’t cross browser tested yet to be honest…only FireFox) could be using ‘auto’ instead of ‘100%’.

    Hope this will help

    groeten/greetings

    Sjoerd

    wow 9 months ago!
    anyway i will just post my solution here as if it can be helpful for another people.

    it is not perfect.
    anyone want to develop for a better outcome, please do.
    i would love to know it too.

    1.

    body{
	margin:0; padding:0;
	}

/*you can try this too. all browser will give H100%, but problem will show up when trying to reduce the window size!*/
/*html, html body{
    margin:0; padding:0;
    height:100%;
    }*/

html, *+html body{/*ck for ie7*/
    margin:0; padding:0;
    height:100%;
    }

*html body {/*ck for ie6*/
	height:100%;
	}

#wrapper{
       min-height:100%;
	height:100%;
	background:#6CC;/*ck you can remove this*/
	}

*html body #wrapper{/*ck for ie6*/
	height:100%;
	}

    it was tested with
    -ie6,7 > work
    -ff3.5.2 > work
    but
    -ie8, ff2, opera9, opera10 > doesn’t work
    however if you use

    html, html body{
    margin:0; padding:0;
    height:100%;
    }

    it will (almost) work in all browser, but only if you scaledown the browser, you will see the problem.

    or

    2. another way that will work for sure in all browser is using combination of css and table.

    or

    3. fake it graphically by apply background image to <body>

Viewing 2 replies - 1 through 2 (of 2 total)
  • The topic ‘How to make div#wrapper use the whole page vertically’ is closed to new replies.