Question

I have a very short (in height) page here: http://www.problemio.com/auth/forgot_password.php and it looks extremely awkward since the background color only goes down until the page ends.

I thought about making a set height to extend below the screen, but don’t really want to do that because it will make my css more messy.

Is there a simple way to make that kind of a page extend all the way down?

here is my css that sets the general layout:

body, html 
{
    #padding: 5px;
}

body 
{
    font-family:  "Century Gothic",Helvetica,Arial,sans-serif;
    margin: 0;
    padding: 0;
    font-size: 1em;
    background-color: #5C5957;



    #background:url(/img/ui/background_image.png) top left no-repeat;
    #background-size: 100%; 
}

 /* makes the background of the top bar gray */
.container 
{
    position: relative;
    background-color: white;

    overflow:hidden;
    width:1000px;
    margin: 0 auto;
}

Thanks!

Answer 1

Place the background-color rule to the html element also as:
html { background-color: #5C5957; }