Hi everyone, I am David and I am new to the community.
I hope some one can help. I am writing some web pages that all have an external style sheet. The main external css style sheet has the html and body tags set to auto so the pages expand as content fills the page.
I have a few pages that do not have any content and so as a result the web page does not fill the browser. To over come this and to make the web page fill the browser on the web pages that have no content I added some embedded styles for the html and body tags as shown below.
html, body
{
height: 100%;
}
Unfortunately this does not work and the web page is still only rendering half way down the browser window.
If I define a certain height in pixels this does work but I do not want to give the web page a fixed height as I want to view the web page on a mobile device as well a desk top and so the browser height can vary.
Has anyone got any ideas to why my embedded style is not working.
Thanks a lot.

Perhaps.

Or maybe

html{
height: 100%;
}
body {
min-height: 100%;
}

What about using javascript to get the height of the screen and then applying that height to a transparent image that is used as a placeholder. It's a "duct-tape" approach, but it might work. lol

I believe Mansour's approach is easier...