Results 1 to 5 of 5

Thread: html, body {style}

  1. #1
    Join Date
    May 2007
    Posts
    31
    Thanks
    9
    Thanked 0 Times in 0 Posts

    Default html, body {style}

    What does this actually achieve in a cascading style sheet...
    Code:
    html,body {
        width: 100%;
        height: 100%;
    }

  2. #2
    Join Date
    Mar 2007
    Location
    Currently: New York/Philadelphia
    Posts
    2,735
    Thanks
    3
    Thanked 519 Times in 507 Posts

    Default

    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.

  3. #3
    Join Date
    May 2007
    Posts
    31
    Thanks
    9
    Thanked 0 Times in 0 Posts

    Default

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

  4. #4
    Join Date
    Mar 2007
    Location
    Currently: New York/Philadelphia
    Posts
    2,735
    Thanks
    3
    Thanked 519 Times in 507 Posts

    Default

    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:

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

  5. The Following User Says Thank You to Medyman For This Useful Post:

    burginsteve (08-22-2008)

  6. #5
    Join Date
    Jul 2006
    Location
    just north of Boston, MA
    Posts
    1,806
    Thanks
    13
    Thanked 72 Times in 72 Posts

    Default

    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.

Bookmarks

Posting Permissions

  • You may not post new threads
  • You may not post replies
  • You may not post attachments
  • You may not edit your posts
  •