SitePoint Sponsor

User Tag List

Results 1 to 25 of 25
  1. #1
    SitePoint Wizard DoubleDee's Avatar
    Join Date
    Aug 2010
    Location
    Arizona
    Posts
    3,756
    Mentioned
    2 Post(s)
    Tagged
    0 Thread(s)

    Clarification on Height

    I would like to clarify how the following code works...

    Code:
    html,
    body{
    	height: 100%;                               /* Set Height to 100% for IE6.
                                                      Will expand beyond 100%. */
    }
    Is it correct that this sets the <body> at the full-height of the "viewport" for IE6?

    And that <body> will expand beyond the "viewport" if, say, it contained a 20 page article?


    Code:
    #pageWrapper{
    	min-height: 100%;                           /* Provide Full-Height. (All other browsers.) */
    }
    Is it correct that this sets #pageWrapper{} to the full-height of the "viewport" for all other browsers?

    And that #pageWrapper will expand beyond the "viewport" if, say, it contained a 20 page article?


    Code:
    * html #pageWrapper{                          /* Star-Selector Hack (* html) used for
                                                      passing values to only <=IE6 Browsers. */
        height: 100%;                             /* Provide Full-Height. (IE6 and under.) */
    }
    I'm not sure what this does considering the first block of code should have set the "viewport" to full-height for IE6?!

    Thanks,


    Debbie

  2. #2
    padawan silver trophybronze trophy markbrown4's Avatar
    Join Date
    Jul 2006
    Location
    Victoria, Australia
    Posts
    4,107
    Mentioned
    28 Post(s)
    Tagged
    2 Thread(s)
    Yes, you're right.

    The only point of the wrapper is to achieve a footer that sticks to the bottom of the page.

    it's used to position the footer below the 100% wrapper, then the wrapper is dragged up with a negative margin so the footer is on screen.

  3. #3
    SitePoint Wizard DoubleDee's Avatar
    Join Date
    Aug 2010
    Location
    Arizona
    Posts
    3,756
    Mentioned
    2 Post(s)
    Tagged
    0 Thread(s)
    Quote Originally Posted by markbrown4 View Post
    Yes, you're right.
    What am I right about? I asked 4-5 questions.


    The only point of the wrapper is to achieve a footer that sticks to the bottom of the page.

    it's used to position the footer below the 100% wrapper, then the wrapper is dragged up with a negative margin so the footer is on screen.
    Right, but that doesn't exactly answer my questions above.


    Debbie

  4. #4
    padawan silver trophybronze trophy markbrown4's Avatar
    Join Date
    Jul 2006
    Location
    Victoria, Australia
    Posts
    4,107
    Mentioned
    28 Post(s)
    Tagged
    2 Thread(s)
    Is it correct that this sets the <body> at the full-height of the "viewport" for IE6?
    yes.

    And that <body> will expand beyond the "viewport" if, say, it contained a 20 page article?
    yes.

    Is it correct that this sets #pageWrapper{} to the full-height of the "viewport" for all other browsers?
    yes.

    And that #pageWrapper will expand beyond the "viewport" if, say, it contained a 20 page article?
    yes.

    I'm not sure what this does considering the first block of code should have set the "viewport" to full-height for IE6?!
    This won't do anything if you don't want to put a footer below it. That's the only reason it's used.

  5. #5
    SitePoint Wizard DoubleDee's Avatar
    Join Date
    Aug 2010
    Location
    Arizona
    Posts
    3,756
    Mentioned
    2 Post(s)
    Tagged
    0 Thread(s)
    Quote Originally Posted by markbrown4 View Post
    Quote Originally Posted by doubledee
    I'm not sure what this does considering the first block of code should have set the "viewport" to full-height for IE6?!
    This won't do anything if you don't want to put a footer below it. That's the only reason it's used.
    Okay, then, I'm not getting this last part...


    On <body> I have...
    Code:
    html,
    body{
    	height: 100%;                             /* Set Height to 100% for IE6.
                                                    Will expand beyond 100%. */
    }

    And then on #pageWrapper{} I have...
    Code:
      min-height: 100%;                         /* Provide Full-Height. (All other browsers.) */

    And on * html #pageWrapper I have...
    Code:
    * html #pageWrapper{                        /* Star-Selector Hack (* html) used for
                                                     passing values to only <=IE6 Browsers. */
        height: 100%;                           /* Provide Full-Height. (IE6 and under.) */
    }

    If I want a "Sticky Footer" - which is what my total code does - then why do I have to set the height TWICE?!

    And why don't I have to set min-height in <body> for all other browsers?


    Debbie

  6. #6
    Utopia, Inc. silver trophy
    ScallioXTX's Avatar
    Join Date
    Aug 2008
    Location
    The Netherlands
    Posts
    9,031
    Mentioned
    152 Post(s)
    Tagged
    2 Thread(s)
    Sorry, but I have to disagree here

    Is it correct that this sets the <body> at the full-height of the "viewport" for IE6?
    That is correct, but it also sets <body> to 100% height in every other browser. This code works in all browsers, not just IE6.

    And that <body> will expand beyond the "viewport" if, say, it contained a 20 page article?
    Yes.

    Is it correct that this sets #pageWrapper{} to the full-height of the "viewport" for all other browsers?
    No, this sets #pageWrapper to be as least as high as the <body> (assuming that that's its direct parent). Seeing how <body> is at least as high as the viewport, #pageWrapper will also be at least as high as the viewport.

    And that #pageWrapper will expand beyond the "viewport" if, say, it contained a 20 page article?
    Yes, it's min-height after all

    I'm not sure what this does considering the first block of code should have set the "viewport" to full-height for IE6?!
    This is the IE <= 6 version of min-height. IE6 doesn't support min-height, but height in IE6 behaves more or less the same as min-height does in other browsers (because IE6 handles overflow differently that other browsers using the default value). So it does the same as the min-height set earlier, but only for IE6 (and below).



    PS. By now you should really know that * html whatever is IE6 only. Tsk tsk
    Rémon - Hosting Advisor

    Minimal Bookmarks Tree
    My Google Chrome extension: browsing bookmarks made easy

  7. #7
    padawan silver trophybronze trophy markbrown4's Avatar
    Join Date
    Jul 2006
    Location
    Victoria, Australia
    Posts
    4,107
    Mentioned
    28 Post(s)
    Tagged
    2 Thread(s)
    This is your real question.
    If I want a "Sticky Footer" - which is what my total code does - then why do I have to set the height TWICE?!
    Because height: 100% only sets an elements height to 100% of the parent.
    Code html5:
    <!DOCTYPE html>
    <html>
    <head>
    <meta charset="utf-8">
    <title></title>
    <style>
    #wrapper {
    	height: 100%;
    	background: red;
    }
    </style>
    </head>
    <body>
    <div id="wrapper">
    </div>
    </body>
    </html>
    Because the body isn't 100% height by default the div doesn't have a height.
    If you set the html & body heights to 100% then it works as expected.
    Code html5:
    <!DOCTYPE html>
    <html>
    <head>
    <meta charset="utf-8">
    <title>hovercat</title>
    <style>
    html,body { height: 100%; margin: 0; padding: 0; }
    #wrapper {
    	height: 100%;
    	background: red;
    }
    </style>
    </head>
    <body>
    <div id="wrapper">
    </div>
    </body>
    </html>

  8. #8
    SitePoint Wizard DoubleDee's Avatar
    Join Date
    Aug 2010
    Location
    Arizona
    Posts
    3,756
    Mentioned
    2 Post(s)
    Tagged
    0 Thread(s)
    Is there a way to make text a certain color, like red, INSIDE of the [code] tags?


    Debbie

  9. #9
    SitePoint Wizard DoubleDee's Avatar
    Join Date
    Aug 2010
    Location
    Arizona
    Posts
    3,756
    Mentioned
    2 Post(s)
    Tagged
    0 Thread(s)
    Quote Originally Posted by ScallioXTX View Post
    Sorry, but I have to disagree here

    Quote Originally Posted by doubledee
    Is it correct that this sets the <body> at the full-height of the "viewport" for IE6?

    Code:
    html,
    body{
    	height: 100%;                               /* Set Height to 100% for IE6.
                                                      Will expand beyond 100%. */
    }

    That is correct, but it also sets <body> to 100% height in every other browser. This code works in all browsers, not just IE6.
    Why does height apply to *all* browsers when it is used in <body> but not when it it is used in other places like in #pageWrapper??

    Sure you stand by your comments?!


    Debbie

  10. #10
    SitePoint Wizard DoubleDee's Avatar
    Join Date
    Aug 2010
    Location
    Arizona
    Posts
    3,756
    Mentioned
    2 Post(s)
    Tagged
    0 Thread(s)
    Quote Originally Posted by markbrown4 View Post
    This is your real question.

    Because height: 100% only sets an elements height to 100% of the parent.
    Code html5:
    <!DOCTYPE html>
    <html>
    <head>
    <meta charset="utf-8">
    <title></title>
    <style>
    #wrapper {
    	height: 100%;
    	background: red;
    }
    </style>
    </head>
    <body>
    <div id="wrapper">
    </div>
    </body>
    </html>

    Because the body isn't 100% height by default the div doesn't have a height.
    If you set the html & body heights to 100% then it works as expected.
    Code html5:
    <!DOCTYPE html>
    <html>
    <head>
    <meta charset="utf-8">
    <title>hovercat</title>
    <style>
    html,body { height: 100%; margin: 0; padding: 0; }
    #wrapper {
    	height: 100%;
    	background: red;
    }
    </style>
    </head>
    <body>
    <div id="wrapper">
    </div>
    </body>
    </html>
    So why do I need #pageWrapper then?

    It sounds like html,body { height: 100%; margin: 0; padding: 0; } should be enough in and of itself for my "Sticky Footer"?


    Debbie

  11. #11
    padawan silver trophybronze trophy markbrown4's Avatar
    Join Date
    Jul 2006
    Location
    Victoria, Australia
    Posts
    4,107
    Mentioned
    28 Post(s)
    Tagged
    2 Thread(s)
    So why do I need #pageWrapper then?
    That was in my first answer that you said didn't answer your question

    it's used to position the footer below the 100% wrapper, then the wrapper is dragged up with a negative margin so the footer is on screen.
    To achieve the sticky footer you have to have a footer directly after the 100% wrapper
    Code:
    <div id="outer"></div>
    <div id="footer"></div>
    to make outer 100% you need to have the body at 100%.
    Why does height apply to *all* browsers when it is used in <body> but not when it it is used in other places like in #pageWrapper??
    You are right, html & body are special and behave differently to other elements..

    e.g. we've established that the body isn't 100% by default.. as far as it's children are concerned. yet, if you give it a background it shows it is 100%.
    Code:
    <!DOCTYPE html>
    <html>
    <head>
    	<meta charset="utf-8">
    	<title>untitled</title>
    </head>
    <body style="background: red">
    </body>
    </html>
    Just roll with it and make the html & body tags 100% height if you want a sticky footer.

  12. #12
    Utopia, Inc. silver trophy
    ScallioXTX's Avatar
    Join Date
    Aug 2008
    Location
    The Netherlands
    Posts
    9,031
    Mentioned
    152 Post(s)
    Tagged
    2 Thread(s)
    Quote Originally Posted by DoubleDee View Post
    Why does height apply to *all* browsers when it is used in <body> but not when it it is used in other places like in #pageWrapper??

    Sure you stand by your comments?!
    Yes, height always applies to all browsers. min-height doesn't apply to all browsers, because IE<=6 don't understand min-height, and browsers other than IE don't understand height within * html #pageWrapper because they don't apply that selector because it is nonsense. IE6 somehow thinks that rule is okay, and does apply it. This has nothing to do with "height", and everything to do with the selector.
    But normal "height" in a normal selector that is understood by all browsers, will be understood and used by all browsers.
    Rémon - Hosting Advisor

    Minimal Bookmarks Tree
    My Google Chrome extension: browsing bookmarks made easy

  13. #13
    Robert Wellock silver trophybronze trophy xhtmlcoder's Avatar
    Join Date
    Apr 2002
    Location
    A Maze of Twisty Little Passages
    Posts
    6,316
    Mentioned
    60 Post(s)
    Tagged
    0 Thread(s)
    Assuming this question was referring to the SPF code blocks.

    Quote Originally Posted by DoubleDee
    Is there a way to make text a certain color, like red, INSIDE of the [code] tags?
    Code:
    <p>
      It is customarily known among travellers that extra-healing draughts may clear
      thy senses when thou art addled by delusory visions. But never forget, the lowly
      potion which makes one sick may be used for the same purpose.
    </p>
    Then you may have to do it manually... but if you mean override the pseudo languages the answer be not likely.

  14. #14
    SitePoint Wizard DoubleDee's Avatar
    Join Date
    Aug 2010
    Location
    Arizona
    Posts
    3,756
    Mentioned
    2 Post(s)
    Tagged
    0 Thread(s)
    Quote Originally Posted by markbrown4 View Post
    That was in my first answer that you said didn't answer your question


    To achieve the sticky footer you have to have a footer directly after the 100% wrapper
    Code:
    <div id="outer"></div>
    <div id="footer"></div>
    to make outer 100% you need to have the body at 100%.
    Okay, I follow that. I was just thinking you could eliminate #pageWrapper in my code. But now that I think about it, you CANNOT have other tags outside of <body>, right?


    You are right, html & body are special and behave differently to other elements..
    Okay.


    e.g. we've established that the body isn't 100% by default.. as far as it's children are concerned. yet, if you give it a background it shows it is 100%.
    Code:
    <!DOCTYPE html>
    <html>
    <head>
    	<meta charset="utf-8">
    	<title>untitled</title>
    </head>
    <body style="background: red">
    </body>
    </html>
    Just roll with it and make the html & body tags 100% height if you want a sticky footer.
    Just trying to learn the intricacies of things.


    Debbie

  15. #15
    SitePoint Wizard DoubleDee's Avatar
    Join Date
    Aug 2010
    Location
    Arizona
    Posts
    3,756
    Mentioned
    2 Post(s)
    Tagged
    0 Thread(s)
    Off Topic:

    Quote Originally Posted by xhtmlcoder View Post
    Assuming this question was referring to the SPF code blocks.



    Code:
    <p>
      It is customarily known among travellers that extra-healing draughts may clear
      thy senses when thou art addled by delusory visions. But never forget, the lowly
      potion which makes one sick may be used for the same purpose.
    </p>
    Then you may have to do it manually... but if you mean override the pseudo languages the answer be not likely.

    What I would like to do is change the color and bold certain parts of my code withing the SitePoint [code] tags.

    Similar to how I can do it within the [quote] tags like this...

    This is content withing a SitePoint [ quote ] tag and I want to make this part bold, red!!

    I am certain that I've seen others do this before?!


    Debbie

  16. #16
    SitePoint Wizard DoubleDee's Avatar
    Join Date
    Aug 2010
    Location
    Arizona
    Posts
    3,756
    Mentioned
    2 Post(s)
    Tagged
    0 Thread(s)
    Quote Originally Posted by ScallioXTX View Post
    Yes, height always applies to all browsers.
    In all tags as well?

    I don't think that is correct.

    It sounds like height:100% applies to all browsers when used inside of the html and body tags...


    min-height doesn't apply to all browsers, because IE<=6 don't understand min-height,
    Okay.


    and browsers other than IE don't understand height within * html #pageWrapper because they don't apply that selector because it is nonsense. IE6 somehow thinks that rule is okay, and does apply it. This has nothing to do with "height", and everything to do with the selector.

    But normal "height" in a normal selector that is understood by all browsers, will be understood and used by all browsers.
    That must not be true. If it were true, then I wouldn't need code like I have...
    Code:
    html,
    body{
    	height: 100%;                             /* Set Height to 100% for All Browsers.
                                                    Will expand beyond 100%. */
    }
    
    #pageWrapper{
    	min-height: 100%;                         /* Provide Full-Height. (All non-IE Browsers.) */
    }
    
    * html #pageWrapper{                        /* Star-Selector Hack (* html) used for
                                                     passing values to only <=IE6 Browsers. */
        height: 100%;                           /* Provide Full-Height. (IE6 and under.) */
    }

    Based on my understanding of what you are saying, my code could look like this and work and be much simplier...
    Code:
    html,
    body{
    	height: 100%;                             /* Set Height to 100% for All Browsers.
                                                    Will expand beyond 100%. */
    }
    
    #pageWrapper{
    	height: 100%;                         /* Provide Full-Height. (All Browsers.) */
    }

    I don't mean to belabor this, but I want to get this 110% correct!!



    Debbie

  17. #17
    Utopia, Inc. silver trophy
    ScallioXTX's Avatar
    Join Date
    Aug 2008
    Location
    The Netherlands
    Posts
    9,031
    Mentioned
    152 Post(s)
    Tagged
    2 Thread(s)
    Quote Originally Posted by Debbie
    In all tags as well?

    I don't think that is correct.
    You're right, it only works on block elements, not on inline elements. But that's just how height works ...


    And yes, all browsers understand "height", but giving #pageWrapper height 100% is not the behavior you're after. Because then #pageWrapper won't stretch when its contents is longer than the viewport. With min-height it will stretch beyond the viewport because you only told it the minimum height (i.e. the viewport) but not a maximum height, so it can grow as long as it likes. The other height that is set for #pageWrapper is for IE 6 and under only. This is a not a new height you set on the element, this is a IE specific hack to mimic min-height, because IE 6 and lower don't understand min-height.

    Try this example (in a modern browser, not IE <= 6):

    Code:
    <!DOCTYPE html>
    <html>
    <head>
            <title>Bla</title>
            <style type="text/css">
                    body,html { height: 100%; padding: 0; margin: 0; }
                    #wrapper { height: 100%; width: 50px; margin: 0 auto; background: red; }
            </style>
    </head>
    <body>
            <div id="wrapper">
    Ut convallis, sem sit amet interdum consectetuer, odio augue aliquam leo, nec dapibus tortor nibh sed augue. Integer eu magna sit amet metus fermentum posuere. Morbi sit amet nulla sed dolor elementum imperdiet. Quisque fermentum. Cum sociis natoque penatibus et magnis dis parturient montes, nascetur ridiculus mus. Pellentesque adipiscing eros ut libero. Ut condimentum mi vel tellus. Suspendisse laoreet. Fusce ut est sed dolor gravida convallis. Morbi vitae ante. Vivamus ultrices luctus nunc. Suspendisse et dolor. Etiam dignissim. Proin malesuada adipiscing lacus. Donec metus. Curabitur gravida.
    Ut convallis, sem sit amet interdum consectetuer, odio augue aliquam leo, nec dapibus tortor nibh sed augue. Integer eu magna sit amet metus fermentum posuere. Morbi sit amet nulla sed dolor elementum imperdiet. Quisque fermentum. Cum sociis natoque penatibus et magnis dis parturient montes, nascetur ridiculus mus. Pellentesque adipiscing eros ut libero. Ut condimentum mi vel tellus. Suspendisse laoreet. Fusce ut est sed dolor gravida convallis. Morbi vitae ante. Vivamus ultrices luctus nunc. Suspendisse et dolor. Etiam dignissim. Proin malesuada adipiscing lacus. Donec metus. Curabitur gravida.
    Ut convallis, sem sit amet interdum consectetuer, odio augue aliquam leo, nec dapibus tortor nibh sed augue. Integer eu magna sit amet metus fermentum posuere. Morbi sit amet nulla sed dolor elementum imperdiet. Quisque fermentum. Cum sociis natoque penatibus et magnis dis parturient montes, nascetur ridiculus mus. Pellentesque adipiscing eros ut libero. Ut condimentum mi vel tellus. Suspendisse laoreet. Fusce ut est sed dolor gravida convallis. Morbi vitae ante. Vivamus ultrices luctus nunc. Suspendisse et dolor. Etiam dignissim. Proin malesuada adipiscing lacus. Donec metus. Curabitur gravida.
    Ut convallis, sem sit amet interdum consectetuer, odio augue aliquam leo, nec dapibus tortor nibh sed augue. Integer eu magna sit amet metus fermentum posuere. Morbi sit amet nulla sed dolor elementum imperdiet. Quisque fermentum. Cum sociis natoque penatibus et magnis dis parturient montes, nascetur ridiculus mus. Pellentesque adipiscing eros ut libero. Ut condimentum mi vel tellus. Suspendisse laoreet. Fusce ut est sed dolor gravida convallis. Morbi vitae ante. Vivamus ultrices luctus nunc. Suspendisse et dolor. Etiam dignissim. Proin malesuada adipiscing lacus. Donec metus. Curabitur gravida.
    
    Ut convallis, sem sit amet interdum consectetuer, odio augue aliquam leo, nec dapibus tortor nibh sed augue. Integer eu magna sit amet metus fermentum posuere. Morbi sit amet nulla sed dolor elementum imperdiet. Quisque fermentum. Cum sociis natoque penatibus et magnis dis parturient montes, nascetur ridiculus mus. Pellentesque adipiscing eros ut libero. Ut condimentum mi vel tellus. Suspendisse laoreet. Fusce ut est sed dolor gravida convallis. Morbi vitae ante. Vivamus ultrices luctus nunc. Suspendisse et dolor. Etiam dignissim. Proin malesuada adipiscing lacus. Donec metus. Curabitur gravida.
    Ut convallis, sem sit amet interdum consectetuer, odio augue aliquam leo, nec dapibus tortor nibh sed augue. Integer eu magna sit amet metus fermentum posuere. Morbi sit amet nulla sed dolor elementum imperdiet. Quisque fermentum. Cum sociis natoque penatibus et magnis dis parturient montes, nascetur ridiculus mus. Pellentesque adipiscing eros ut libero. Ut condimentum mi vel tellus. Suspendisse laoreet. Fusce ut est sed dolor gravida convallis. Morbi vitae ante. Vivamus ultrices luctus nunc. Suspendisse et dolor. Etiam dignissim. Proin malesuada adipiscing lacus. Donec metus. Curabitur gravida.
    Ut convallis, sem sit amet interdum consectetuer, odio augue aliquam leo, nec dapibus tortor nibh sed augue. Integer eu magna sit amet metus fermentum posuere. Morbi sit amet nulla sed dolor elementum imperdiet. Quisque fermentum. Cum sociis natoque penatibus et magnis dis parturient montes, nascetur ridiculus mus. Pellentesque adipiscing eros ut libero. Ut condimentum mi vel tellus. Suspendisse laoreet. Fusce ut est sed dolor gravida convallis. Morbi vitae ante. Vivamus ultrices luctus nunc. Suspendisse et dolor. Etiam dignissim. Proin malesuada adipiscing lacus. Donec metus. Curabitur gravida.
    Ut convallis, sem sit amet interdum consectetuer, odio augue aliquam leo, nec dapibus tortor nibh sed augue. Integer eu magna sit amet metus fermentum posuere. Morbi sit amet nulla sed dolor elementum imperdiet. Quisque fermentum. Cum sociis natoque penatibus et magnis dis parturient montes, nascetur ridiculus mus. Pellentesque adipiscing eros ut libero. Ut condimentum mi vel tellus. Suspendisse laoreet. Fusce ut est sed dolor gravida convallis. Morbi vitae ante. Vivamus ultrices luctus nunc. Suspendisse et dolor. Etiam dignissim. Proin malesuada adipiscing lacus. Donec metus. Curabitur gravida.
    Ut convallis, sem sit amet interdum consectetuer, odio augue aliquam leo, nec dapibus tortor nibh sed augue. Integer eu magna sit amet metus fermentum posuere. Morbi sit amet nulla sed dolor elementum imperdiet. Quisque fermentum. Cum sociis natoque penatibus et magnis dis parturient montes, nascetur ridiculus mus. Pellentesque adipiscing eros ut libero. Ut condimentum mi vel tellus. Suspendisse laoreet. Fusce ut est sed dolor gravida convallis. Morbi vitae ante. Vivamus ultrices luctus nunc. Suspendisse et dolor. Etiam dignissim. Proin malesuada adipiscing lacus. Donec metus. Curabitur gravida.
            </div>
    </body>
    </html>
    See what happens with height 100% on the wrapper. Then see what happens when you change it to min-height.

    See the difference?
    Rémon - Hosting Advisor

    Minimal Bookmarks Tree
    My Google Chrome extension: browsing bookmarks made easy

  18. #18
    SitePoint Wizard DoubleDee's Avatar
    Join Date
    Aug 2010
    Location
    Arizona
    Posts
    3,756
    Mentioned
    2 Post(s)
    Tagged
    0 Thread(s)
    Quote Originally Posted by ScallioXTX View Post
    And yes, all browsers understand "height", but giving #pageWrapper height 100% is not the behavior you're after. Because then #pageWrapper won't stretch when its contents is longer than the viewport. With min-height it will stretch beyond the viewport because you only told it the minimum height (i.e. the viewport) but not a maximum height, so it can grow as long as it likes. The other height that is set for #pageWrapper is for IE 6 and under only. This is a not a new height you set on the element, this is a IE specific hack to mimic min-height, because IE 6 and lower don't understand min-height.
    I'm confused on the code you gave if I tweak it.

    If I try this...
    Code:
                    body,html {height: 100%; padding: 0; margin: 0; }
                    #wrapper {height: 100%; width: 50px; margin: 0 auto; background: red; }
    ...then I get a red band the height of my viewport, but text goes down beyond the viewport.


    If I try this...
    Code:
                    body,html {height: 100%; padding: 0; margin: 0; }
                    #wrapper {min-height: 100%; width: 50px; margin: 0 auto; background: red; }
    ...then I get a red band and text that go down beyond the viewport.


    If I try this...
    Code:
                    body,html {padding: 0; margin: 0; }
                    #wrapper {height: 100%; width: 50px; margin: 0 auto; background: red; }
    ...then I get a red band and text that go down beyond the viewport.


    With the first and third examples above, I would expect the text to get chopped off and not be able to scroll vertically, right? But that doesn't happen on my MacBook in FireFox 8.0.1?!



    Debbie

  19. #19
    It's all Geek to me silver trophybronze trophy
    ralph.m's Avatar
    Join Date
    Mar 2009
    Location
    Melbourne, AU
    Posts
    24,112
    Mentioned
    448 Post(s)
    Tagged
    8 Thread(s)
    Quote Originally Posted by DoubleDee View Post
    If I try this...
    Code:
                    body,html {height: 100%; padding: 0; margin: 0; }
                    #wrapper {height: 100%; width: 50px; margin: 0 auto; background: red; }
    ...then I get a red band the height of my viewport, but text goes down beyond the viewport.
    Yes, the text goes below the viewport, but not the red band, and that's the problem. The wrapper is stuck at the height of the viewport, which is not what you want. Your wrapper background would not continue forever, but would be cut off where the red band is cut off and you'd have text spilling down the screen clearly falling out of its container.

    As to highlighting code, if you wrap anything in [code] tags, then just use the A link in the toolbar to set a color or click the B button to bold the text. Etc.
    Facebook | Google+ | Twitter | Web Design Tips | Free Contact Form

    Forum Usage: Tips on posting code samples, images and more

    Forrest Gump: "IE is like a box of chocolates: you never know what you're gonna get."

  20. #20
    SitePoint Wizard DoubleDee's Avatar
    Join Date
    Aug 2010
    Location
    Arizona
    Posts
    3,756
    Mentioned
    2 Post(s)
    Tagged
    0 Thread(s)
    Quote Originally Posted by ralph.m View Post
    Yes, the text goes below the viewport, but not the red band, and that's the problem. The wrapper is stuck at the height of the viewport, which is not what you want. Your wrapper background would not continue forever, but would be cut off where the red band is cut off and you'd have text spilling down the screen clearly falling out of its container.
    I figured that this...
    Code:
                    body,html {height: 100%; padding: 0; margin: 0; }
                    #wrapper {height: 100%; width: 50px; margin: 0 auto; background: red; }
    or this...
    Code:
    Code:
                    body,html {padding: 0; margin: 0; }
                    #wrapper {height: 100%; width: 50px; margin: 0 auto; background: red; }
    ...would cut off the text if it was longer than the viewport was high?! (Was *certain* I saw an example of that somewhere in the past?!)

    Hmm.


    Debbie

    P.S.

    Code:
    html,
    body{
    	height: 100%;                             /* This is a test!! */
    }


    That never worked before... Hmmm....

  21. #21
    It's all Geek to me silver trophybronze trophy
    ralph.m's Avatar
    Join Date
    Mar 2009
    Location
    Melbourne, AU
    Posts
    24,112
    Mentioned
    448 Post(s)
    Tagged
    8 Thread(s)
    Quote Originally Posted by DoubleDee View Post
    I figured that this... would cut off the text if it was longer than the viewport was high?! (Was *certain* I saw an example of that somewhere in the past?!)
    You are probably thinking of #wrapper {overflow:hidden; }.

    If you set a height on a div, it is restricted to that height (except in old IE). But the content itself is not restricted to that height—which is why it's usually a bad idea to set a height on anything on the web. If a user's font sizes are set to something bigger than you expect, the text will spill out of the div in a very ugly way.
    Facebook | Google+ | Twitter | Web Design Tips | Free Contact Form

    Forum Usage: Tips on posting code samples, images and more

    Forrest Gump: "IE is like a box of chocolates: you never know what you're gonna get."

  22. #22
    Utopia, Inc. silver trophy
    ScallioXTX's Avatar
    Join Date
    Aug 2008
    Location
    The Netherlands
    Posts
    9,031
    Mentioned
    152 Post(s)
    Tagged
    2 Thread(s)
    if you don't set a height on body and html their "height" will be set to "auto", or, "grow as tall as needed". In that case when you give #wrapper a height of 100% you tell it to "be as high as itself" (indeed if you left out the "height" on that element your result would be exactly the same).

    This method works if you have more content than the viewport, but once you have just a little content, #wrapper will only be as high as the content. and not stretch all the way down to the bottom of the viewport.
    Rémon - Hosting Advisor

    Minimal Bookmarks Tree
    My Google Chrome extension: browsing bookmarks made easy

  23. #23
    The CSS Clinic is open silver trophybronze trophy
    Paul O'B's Avatar
    Join Date
    Jan 2003
    Location
    Hampshire UK
    Posts
    40,281
    Mentioned
    179 Post(s)
    Tagged
    6 Thread(s)
    Regarding the height:100% on html and body then the height is treated much the same but as already mentioned the html and body are slightly special.

    We set the body to height:100% and effectively that height is capped to 100% and doesn't expand (much in the same way that an inner div wouldn't expand if it was set to 100%).

    Here's an example.

    Code:
    <!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN" "http://www.w3.org/TR/html4/strict.dtd">
    <html>
    <head>
    <meta http-equiv="Content-Type" content="text/html; charset=utf-8">
    <title>Untitled Document</title>
    <style>
    html, body {
    	height:100%;
    	margin:0;
    	padding:0;
    }
    html { background:green }
    body { background:red }
    p { margin:0 0 5em }
    </style>
    </head>
    
    <body>
    <p>test</p>
    <p>test</p>
    <p>test</p>
    <p>test</p>
    <p>test</p>
    <p>test</p>
    <p>test</p>
    <p>test</p>
    <p>test</p>
    <p>test</p>
    <p>test</p>
    <p>test</p>
    <p>test</p>
    <p>test</p>
    <p>test</p>
    <p>test</p>
    <p>test</p>
    <p>test</p>
    <p>test</p>
    <p>test</p>
    <p>test</p>
    <p>test</p>
    <p>test</p>
    <p>test</p>
    <p>test</p>
    <p>test</p>
    <p>test</p>
    <p>test</p>
    <p>test</p>
    <p>test</p>
    <p>test</p>
    <p>test</p>
    <p>test</p>
    <p>test</p>
    </body>
    </html>
    In the above the html element is green and body is red. As soon as you go below the fold (i.e greater than 100%) you lose the red body colour and the green of the html takes over! Therefore we can deduce that the body is only 100% high and does not grow but that html is special and will still supply a background to the content below the fold. If we set html and body to 300px high the green background would still continue forever.

    This often catches people out when they supply colours for both html and body and see the body stopping at the fold when 100% height is used.

    That leads us to the question that if we remove the background colour from html why doesn't the red background stop at the viewport bottom edges as before? We haven't changed anything else but simply removed the green background:color.

    Code:
    <!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN" "http://www.w3.org/TR/html4/strict.dtd">
    <html>
    <head>
    <meta http-equiv="Content-Type" content="text/html; charset=utf-8">
    <title>Untitled Document</title>
    <style>
    html, body {
    	height:100%;
    	margin:0;
    	padding:0;
    }
    html {}
    body { background:red }
    p { margin:0 0 5em }
    </style>
    </head>
    
    <body>
    <p>test</p>
    <p>test</p>
    <p>test</p>
    <p>test</p>
    <p>test</p>
    <p>test</p>
    <p>test</p>
    <p>test</p>
    <p>test</p>
    <p>test</p>
    <p>test</p>
    <p>test</p>
    <p>test</p>
    <p>test</p>
    <p>test</p>
    <p>test</p>
    <p>test</p>
    <p>test</p>
    <p>test</p>
    <p>test</p>
    <p>test</p>
    <p>test</p>
    <p>test</p>
    <p>test</p>
    <p>test</p>
    <p>test</p>
    <p>test</p>
    <p>test</p>
    <p>test</p>
    <p>test</p>
    <p>test</p>
    <p>test</p>
    <p>test</p>
    <p>test</p>
    </body>
    </html>
    The reason is that the body is special also and any background applied to the body element is automatically propagated to html as well (unless html has its own colour defined). So in our second example the body still stops at 100% high but then the html element takes over and supplies the red colour from there on even though we specified no colour for html.

    How does this affect our 100% high layout?

    As long as html has not been used for background colour or images then it has no real effect because our min-height:100% wrapper element simply overflows the body and continues down the page unabated. So the simple reply to your question is the the body is only 100% height but our inner element is allowed to overflow without consequence.

    In answer to an earlier question you could theoretically use the body element as your page wrapper and supply it with min-height:100% but that would mean that the sticky footer would need to be outside of the body element which is not allowed so can't take that approach.

  24. #24
    SitePoint Wizard DoubleDee's Avatar
    Join Date
    Aug 2010
    Location
    Arizona
    Posts
    3,756
    Mentioned
    2 Post(s)
    Tagged
    0 Thread(s)
    Interesting demo!

    Thanks as always, Paul!

    Sincerely,


    Debbie

  25. #25
    padawan silver trophybronze trophy markbrown4's Avatar
    Join Date
    Jul 2006
    Location
    Victoria, Australia
    Posts
    4,107
    Mentioned
    28 Post(s)
    Tagged
    2 Thread(s)
    Quote Originally Posted by Paul O'B View Post
    The reason is that the body is special also and any background applied to the body element is automatically propagated to html as well (unless html has its own colour defined). So in our second example the body still stops at 100% high but then the html element takes over and supplies the red colour from there on even though we specified no colour for html.

    How does this affect our 100% high layout?

    As long as html has not been used for background colour or images then it has no real effect because our min-height:100% wrapper element simply overflows the body and continues down the page unabated. So the simple reply to your question is the the body is only 100% height but our inner element is allowed to overflow without consequence.
    Thanks Paul, I didn't realise that was what was happening.


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
  •