Forums

The forums ran from 2008-2020 and are now closed and viewable here as an archive.

Home Forums CSS html body default heights

  • This topic is empty.
Viewing 6 posts - 1 through 6 (of 6 total)
  • Author
    Posts
  • #149600
    sadunaresh
    Participant

    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…?

    #149603
    Paulie_D
    Member

    Simply 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.

    http://codepen.io/anon/pen/uKvhE

    #149616
    sadunaresh
    Participant

    @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…?

    #149636
    Paulie_D
    Member

    Perhaps you could make up some cases in Codepen…I’m not getting what you are saying.

    Oh…and is it really important? :)

    #149638
    Paulie_D
    Member

    However, 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.

    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.

    http://www.w3.org/TR/CSS2/zindex.html

    #149693
    sadunaresh
    Participant

    However, 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…

Viewing 6 posts - 1 through 6 (of 6 total)
  • The forum ‘CSS’ is closed to new topics and replies.