html, body {style}

[burginsteve]

What does this actually achieve in a cascading style sheet...

html,body {
width: 100%;
height: 100%;
}

[Medyman]

When adding fluid dimensions to any child element, you need to set values in the same dimensions to the parent element.

So, say that I have a "container" div that I want to span 70% of the page. But, when I say 70%, what is it 70% of? It's generally understood that it means 70% of it's parent element. So, the parent element (in this case body) needs a width. Otherwise, there is no value to base the calculation off of.

100% height is used in several CSS techniques. For example, if you wanted to keep your footer at the bottom of a page, you might use it.

[burginsteve]

Thanks, thats clear to me in respect of 'body' but why 'html'?

[Medyman]

Same reason really...

If you're setting 100% width to the body, you need that to reference something as well. So, you need width on the html element.

Styling html and body at the same time is just convention. You could just as well do:


html,body,div.container, div.inner {
height:100%;
width:100%;
}

[boogyman]

the doctype / html / head tags are reference tag that tells the program (browser) what to do when displaying the page. The body tag is where all of the actual output (code) should be displayed. It may use one of the reference tag as a guide, however everything that is viewed within the viewport if properly done will be declared within the body tag... this is why generally when you make css rules, you reference the body tag first. Now referencing the html tag will not harm you, however it's really just an additional modification (hack) that some developers use as a work around a particular situation.