Question

I’m experimenting with this sample page on jsbin: http://jsbin.com/igeca4/edit

The height right now is 741px however, at the bottom there is still some white space left.

I can keep doing trial and error witht the height pixels but whatever the user viewing the page has a large monitor. My page will then look half empty from the bottom.

Is there a trick that can be used to take up all the height in a webpage?

Answer 1

There is no standard height of a webpage; you can’t even assume the user has his/her browser maximized. If you are going to have a footer or page-bottom content, you want to make your page the full height of the browser.

Here is a link on having 100% height in CSS. Basically, you need to set the html and body objects to height: 100%;. (Most people don’t think of html as an element to stylize.) You may need to make other adjustments based on the situation.

http://www.dave-woods.co.uk/?p=144

For more information, you can also refer to these. They should also be helpful:

• http://css-discuss.incutio.com/wiki/Hundred_Percent_Height
• http://www.thefutureoftheweb.com/blog/100-percent-height-interface