- This topic is empty.
-
AuthorPosts
-
September 10, 2013 at 3:34 am #149600sadunareshParticipant
what are the default heights of html and body elements?(doctype html5)
my assumptions are..
html height = window/viewport’s height?
body behaves like usual block level element? grows its height per its contents?
I have been trying to understand this, I have tried to test it using background color on a document with html5 doctype..
first when I set background color to black on body tag… good it filled my screen with black…
then I’ve set html’s background color to white, keeping body’s background color as is(I was expecting browser to be filled black), to my surprise it is all white and black is displaying only on body’s height…
can someone please help me understand the behavior of html and body elements and their default styles…?
September 10, 2013 at 4:24 am #149603Paulie_DMemberSimply put, the
html
element is the blank canvas on which everything is drawn.The
body
tells the browser that only the elements contained within it are items are to be rendered on the screen.If the body has no contents and thus no dimensions…setting a background will do nothing.
As soon as you add an element to the body, the background will show up and, because the
body
element is block level it will be 100% wide (except for any padding assumed by the browser) but only as high as the dimensions of the elements within it.September 10, 2013 at 5:13 am #149616sadunareshParticipant@Paulie.. I understood this behavior… but what is not clear for me described as below
case 1
`html { no background color/image defined }
body { background:#000; }`
browser is filled with black
case 2
`html { background:#fff;
}
body { background:#000; }`
browser is filled with white.. and body’s background color fills only till its contents not till bottom of the viewport as in first case…
please explain…. what makes body change its background rendering on defining background on HTML…?
September 10, 2013 at 7:16 am #149636Paulie_DMemberPerhaps you could make up some cases in Codepen…I’m not getting what you are saying.
Oh…and is it really important? :)
September 10, 2013 at 7:31 am #149638Paulie_DMemberHowever, from limited experimentation, is does appear that the
body
bg-color will take take precedence and be 100% high UNLESS a bg color is set on thehtml'
element at which point the browser realises that the `body’ has not dimensions and, effectively disappears.I’m sure there is someone cleverer than me who can figure out WTH is going on.
This is where I think it come from…but I’m not quite understanding it yet.
September 11, 2013 at 3:45 am #149693sadunareshParticipantHowever, from limited experimentation, is does appear that the body bg-color will take take precedence and be 100% high UNLESS a bg color is set on the html’ element at which point the browser realises that the `body’ has not dimensions and, effectively disappears.
this is what my question is.. is there anyone who can explain this behavior?
that spec is confusing me..
Oh…and is it really important? :)
:) not important though… just to be aware… this awareness may come handy… who knows…
-
AuthorPosts
- The forum ‘CSS’ is closed to new topics and replies.