Question

I have the following DIV structure:

<style>
#header{border-bottom:1px solid blue;}
#footer{botter-top:1px solid blue;}
#header,#footer{height:15%;}
#content{height:70%;}
#header,#footer,#content{width:100%;}
</style>

<div id="header"></div>
<div id="content"></div>
<div id="footer"></div>

What I’m noticing is that in desktop browsers, there is an expected overflow with a 2px+ offset from 100%
However, in mobile browsers, there does not seem to be any overflow / scrolling.

• Do mobile devices count borders as part of the 100% height/width calculations?

If so:

• Is there a way to invoke this behavoir through CSS for desktop browsers?
• Is there a way to reverse this behavoir through CSS for mobile browsers?

Answer 1

So yes, desktop browsers will see a 2px offset, because the spec says take 100% of the parent + border + margin. The mobile browsers don’t seem to be affected, but mostly because they are trying to autofit content to the window to eliminate scrolling.

There are 2 css3 fixes, the first being to use the new box-sizing property, and setting it to border-box. The second is to use the flexbox model. But unfortunately older browsers may not support either of these solutions.

So I would use box-sizing, but put an IE conditional statement in to account for IE7 and back, and just use javascript or a css hack to fix it.

edit

here is the solution using box-sizing http://jsfiddle.net/aaFHZ/

body, html {height:100%; width: 100%;}
#header{border-bottom:1px solid blue;}
#footer{border-top:1px solid blue;}
#header,#footer{height:15%;}
#content{height:70%;}
#header,#footer,#content{width:100%; box-sizing:border-box;}

and here is the solution with flexbox (note: this will only work on the most current browsers) http://jsfiddle.net/YkSYN/1/

<style>
body, html {height:100%; width: 100%;}
#header{border-bottom:1px solid blue;}
#footer{border-top:1px solid blue;}
#header,#footer {
    -webkit-box-flex: 15;
    -moz-box-flex: 15;
    box-flex: 15;}
#content {
    -webkit-box-flex: 70;
    -moz-box-flex: 70;
    box-flex: 70;}
#header,#footer,#content{width:100%;}
#wrapper {
    display: -webkit-box;
    -webkit-box-orient: vertical;
    display: -moz-box;
    -moz-box-orient: vertical;
    display: box;
    box-orient: vertical;
    width: 100%; 
    height:100%;}
</style>
<div id="wrapper">
    <div id="header"></div>
    <div id="content"></div>
    <div id="footer"></div>
</div>​