1

When looking at other people's code (or many CSS resets), I see the html element addressed with basic styling (like height: 100%) and sometimes I see it ignored completely. In my experimentation there is no difference, but I am not sure if I am missing something.

In this post they give the example of 

html,body{
   min-height: 101%;
}

to keep scrollbars visible (but no other definitive answer). Other than a hack like this, is there any specific reason to style the html element?

Community
  • 1
  • 1
Startec
  • 12,496
  • 23
  • 93
  • 160
  • Just out of curiosity, you asked already 30 question, why didn't you marked any good answer as "Correct"? It's a way to say 'thanks' here on SO and a way for other users to immediately see from a bunch of other answers which one helped you in your task. – Roko C. Buljan Jun 02 '14 at 23:26
  • 1
    See [Should global css styles be set on the html element or the body element?](http://stackoverflow.com/questions/4565942) and [What's the difference in applying CSS to html, body, and *?](http://stackoverflow.com/questions/7187569) – BoltClock Jun 03 '14 at 04:51
  • 1
    Some examples of when to apply styles to `html` vs `body` can be found here: [Applying a background to and/or ](http://stackoverflow.com/questions/10947541) and [height: 100% or min-height: 100% for html and body elements?](http://stackoverflow.com/questions/17555682) – BoltClock Jun 03 '14 at 04:51

3 Answers3

1

Well the major reason i can think of is that, for specifying height in % the elements parent needs to have a height set explicitly.

Assume you've a container <div> which you need to be of 100% height and responsive. simply applying height:100% won't work unless you specify a height for it's parent <body>.

Hence we'll apply height:100% for the <body> - Now, this won't work since <body>'s parent doesn't have a height set explicitly - which is our <html> element.

Hence we apply

html{
 height:100%;
}

...!

This is not required if your design is not responsive , i.e if you're setting fixed dimensions in pixels

T J
  • 42,762
  • 13
  • 83
  • 138
  • Does setting `html {height: 100%}` actually set it explicitly? (it does seem like it) And basically what you are saying is that it is only necessary to style the html element if you are using a responsive design? – Startec May 28 '14 at 18:34
0

This is used for making height:100% relative to the viewport height.

Ken Wheeler
  • 1,938
  • 12
  • 12
0

As I understand it, it is the html element that displays scrollbars. So if you don't want to display scrollbars at all for some reason you would need to hide overflow on that element.

More information about the html element here

Community
  • 1
  • 1
Dave 5000
  • 346
  • 1
  • 4
  • Yes, I read that post too. Best answer says that it only has to do with scroll bars (so style `html` if you care about scrollbars, but it also says, `(use it) to get 100% height and width` again, making me feel like it is necessary to style the html element if I do want height and width to be 100% of viewport – Startec May 28 '14 at 18:37
  • I can only conclude that the html element is strange. A quick test applying a border to the html element in a page that has little content shows that the element doesn't fill the viewport. But applying a background color to the element shows the entire viewport with the background color. So which actually represents the "container" that is the html element? Setting height of the html element to 100% actually makes it taller than the viewport. – Dave 5000 May 28 '14 at 18:59
  • Yes, I am seeing some weird things when using / omitting css styling on html while using flexbox. I think I am always going to set height to 100% from here on out – Startec May 28 '14 at 19:53
  • Dave, the behavior that you're observing is described here: http://stackoverflow.com/questions/10947541/applying-a-background-to-html-and-or-body/10947583#10947583 – BoltClock Jun 03 '14 at 04:33