Why is 100% more than 100%?

amcalab · 08-08-2007, 09:54 PM

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>

VIPStephan · 08-08-2007, 10:01 PM

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

Arbitrator · 08-08-2007, 10:28 PM

Quote:

Originally Posted by amcalab

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

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

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.

amcalab · 08-08-2007, 11:43 PM

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;

}

amcalab · 08-09-2007, 12:32 AM

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;
}

amcalab · 08-09-2007, 12:40 AM

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;
}

Arbitrator · 08-09-2007, 02:56 PM

Quote:

Originally Posted by amcalab

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.

http://www.quirksmode.org/css/quirksmode.html