Hello and welcome to our community! Is this your first visit?
Register
Enjoy an ad free experience by logging in. Not a member yet? Register.
Results 1 to 7 of 7
  1. #1
    New Coder
    Join Date
    Aug 2007
    Posts
    13
    Thanks
    0
    Thanked 0 Times in 0 Posts

    Why is 100% more than 100%?

    I'm trying to do something very simple...A fluid white box on top of a blue background. But, when I implement the solution below, the content slightly exceeds the width and height of the Mozilla window. This gives an uneven borders and scroll bars. Even setting widths and heights to lower percentages (to account from some unknown padding or margins) doesn't seem to eliminate the problem.

    Also noted...if I remove the body's width specification, the side margins of the box work perfectly. But, if I remove the body's height specification, Mozilla does not recognize the box's min-height specification. Mozilla will, however, recognize a height=100% specification and make the box as big as the viewport. Why would it recognize height but not min-height?

    CSS...
    body {
    width:100%;
    height:100%;
    background: #004A80; /* dark cyan blue */
    }

    #box {
    width: 100%;
    min-height:100%;
    background: #FFFFFF; /* white */
    }

    HTML...
    <body>
    <div id="box"></div>
    </body>
    </html>

  • #2
    The fat guy next door VIPStephan's Avatar
    Join Date
    Jan 2006
    Location
    Halle (Saale), Germany
    Posts
    8,676
    Thanks
    6
    Thanked 1,008 Times in 981 Posts
    The body has a default margin/padding and those add to the overall width of an element. My first action is always:
    Code:
    body {
      margin: 0;
      padding: 0;
      background: [color];
      color: [color];
    }
    Be aware that not all users might have the default white background and black text, one can change that in the browser settings, and setting those in the stylesheet will prevent your design from being screwed up.

    And by the way: to get the container div 100% high you need to set the height of both, the html and body elements to 100%.
    Last edited by VIPStephan; 08-08-2007 at 10:03 PM.

  • #3
    Senior Coder Arbitrator's Avatar
    Join Date
    Mar 2006
    Location
    Splendora, Texas, United States of America
    Posts
    3,302
    Thanks
    28
    Thanked 276 Times in 270 Posts
    Quote Originally Posted by amcalab View Post
    Also noted...if I remove the body's width specification, the side margins of the box work perfectly.
    The width declarations are almost certainly not necessary since normal block‐level elements, such as body and div, expand to fill all available horizontal area automatically.

    Quote Originally Posted by amcalab View Post
    But, if I remove the body's height specification, Mozilla does not recognize the box's min-height specification. […] Why would it recognize height but not min-height?
    The nearest ancestor element needs to have an explicit height. If the height of the nearest ancestor element is fit‐to‐content or is defined by min-height or max-height, then the height, min-height, or max-height properties with a percentage value on the current element will fail. The exception is the html element’s ancestor, which is the viewport or area through which you see a Web page; the browser viewport’s height acts as an explicit height.

    Code:
    * { margin: 0; padding: 0; } /* accounts for VIPStephan’s advice */
    html, body, * html #box { height: 100%; }
    #box { min-height: 100%; }
    * html is an Internet Explorer 6 exploit.

    Quote Originally Posted by amcalab View Post
    Mozilla will, however, recognize a height=100% specification and make the box as big as the viewport.
    The body and div elements do not have a height attribute. This must be a proprietary feature.
    For every complex problem, there is an answer that is clear, simple, and wrong.

  • #4
    New Coder
    Join Date
    Aug 2007
    Posts
    13
    Thanks
    0
    Thanked 0 Times in 0 Posts
    OK. Things work great UNTIL I add a margin to the box - to get that blue border. Then the side margins are OK; but, my bottom margin extends past the viewport.

    Updated CSS:

    body,html {
    margin:0;
    border:0;
    padding:0;
    width:100%;
    height:100%;
    background:#004A80;
    }


    #box {
    margin:2%;
    border:0;
    padding:0;
    width: 96%;
    min-height:96%;
    background:#FFFFFF;


    }

  • #5
    New Coder
    Join Date
    Aug 2007
    Posts
    13
    Thanks
    0
    Thanked 0 Times in 0 Posts
    OK. The following CSS code fixes the problem. I now get a white box centered perfectly on top of a blue background - no overflow. But, I'm not sure why for width I subtract 1xpadding but for height, I subtract 2xpadding.



    body {
    margin:0;
    border:0;
    padding:2%;
    width:98%;
    height:96%;
    background:blue;
    }

    html{
    width:98%;
    height:96%;
    }

    * html #box { height: 100%; }


    #box {
    width: 100%;
    min-height:100%;
    background:#FFFFFF;
    }

  • #6
    New Coder
    Join Date
    Aug 2007
    Posts
    13
    Thanks
    0
    Thanked 0 Times in 0 Posts
    And, per arbitrator's advice, I removed all references to width. I was unaware that width specification was not necessary. And, based on previous results, behaved unexpectedly. Although I'm still not clear why width and height behave differently when you do specify them.

    Thanks again VIPStephan and Arbitrator.

    body {
    margin:0;
    border:0;
    padding:2%;
    height:96%;
    background:blue;
    }

    html{
    height:96%;
    }

    * html #box { height: 100%; }


    #box {
    min-height:100%;
    background:#FFFFFF;
    }

  • #7
    Senior Coder Arbitrator's Avatar
    Join Date
    Mar 2006
    Location
    Splendora, Texas, United States of America
    Posts
    3,302
    Thanks
    28
    Thanked 276 Times in 270 Posts
    Quote Originally Posted by amcalab View Post
    Although I'm still not clear why width and height behave differently when you do specify them.
    I would expect them to behave largely the same. You might be experiencing odd behavior if your document is in quirks mode [1]. I would need to see the document to tell what mode it’s in though.

    1. http://www.quirksmode.org/css/quirksmode.html
    For every complex problem, there is an answer that is clear, simple, and wrong.


  •  

    Posting Permissions

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