html - border overflow 100% height width body 移动浏览器？

Question

我有以下 DIV 结构:

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

我注意到的是，在桌面浏览器中，有一个预期的溢出，从 100% 偏移 2px+但是，在移动浏览器中，似乎没有任何溢出/滚动。

• 移动设备是否将边框计为 100% 高度/宽度计算的一部分？

如果是:

• 有没有办法通过桌面浏览器的 CSS 调用此行为？
• 有没有办法通过适用于移动浏览器的 CSS 来扭转这种行为？

Answer 1

所以是的，桌面浏览器会看到 2px 的偏移量，因为规范说采用 100% 的父级 + 边框 + 边距。移动浏览器似乎没有受到影响，但主要是因为它们试图将内容自动调整到窗口以消除滚动。

有 2 个 css3 修复，第一个是使用新的 box-sizing 属性，并将其设置为 border-box。第二种是使用flexbox模型。但不幸的是，较旧的浏览器可能不支持这两种解决方案。

所以我会使用 box-sizing，但是放入一个 IE 条件语句来说明 IE7 和返回，然后只使用 javascript 或 css hack 来修复它。

编辑

这里是使用 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;}

这里是 flexbox 的解决方案(注意:这只适用于最新的浏览器)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>​