height not extending for full page

I have the CSS below

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

#page {
    width: 900px;
    margin: 0 0;
    height:100%;
    background: url(imgs/bk.png) repeat-y;
}

but it doesn't extend my background to the whole end of the layout, just shows my body background color of #444444 through.

Any help is appreciated please. The website is located at http://www.benfolio.net/new/

EDIT: SOLVED I went out with sme mates and came back for a fresh look at it, first change I made fixed it, the change are below.

html, body { margin:0 0; padding:0 0; background:#444; }

#page { width: 900px; marg开发者_如何学JAVAin: 0 0; height:100%; background: url(imgs/bk.png) repeat-y; overflow:hidden; }

Simply took 'height:100%' out of the html,body section and it then defaulted to just 100% for the page div. Thanks for the help given

Give #page the style overflow: hidden.

Change #page to

#page {
    position: absolute;
    width: 900px;
    margin-left: -450px;
    left: 50%;
    top: 0;
    bottom: 0;
    background: url(imgs/bk.png) repeat-y;
}

Solved: I went out with sme mates and came back for a fresh look at it, first change I made fixed it, the change are below.

html, body { margin:0 0; padding:0 0; background:#444; }

#page { width: 900px; margin: 0 0; height:100%; background: url(imgs/bk.png) repeat-y; overflow:hidden; }

Simply took 'height:100%' out of the html,body section and it then defaulted to just 100% for the page div. Thanks for the help given