边框溢出100％高度宽度身体移动浏览器？

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 属性，并将其设置为边框框。二是使用flexbox模型。但不幸的是，较旧的浏览器可能不支持这两种解决方案。

所以我会使用 box-sizing，但在 IE 7 和后面添加一个 IE 条件语句，然后只使用 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>​

Answer 2

每个默认 box-sizing 的浏览器（移动和桌面）都应该添加 2px。

尝试添加这条规则：

#header,#footer,#content { box-sizing:border-box; }

到你的 CSS。

---

• 有没有办法通过 CSS 为桌面浏览器调用此行为？

不需要。这已经是默认行为了。

• 有没有办法通过移动浏览器的 CSS 来扭转这种行为？

是的，通过添加上面的规则 :-) 或此答案底部的解决方法。

---

如果您只想定位移动设备，请将规则嵌套在媒体查询中：

@media only screen and (max-device-width: 480px){
    #header,#footer,#content { box-sizing:border-box; }
}

要使其在 IE8 上运行，请使用 respond.js。但是如果你只有这个媒体查询，可能你实际上并不需要它（它会被简单地忽略）。

box-sizing 属性 is very well supported by browsers（IE8+，其余所有），我认为您不需要 IE7 的后备（全球不到 2% 的用户）。

---

解决您的问题的另一个非常简单的解决方法是添加 1px 的负边距：

#footer,#content { margin-top:-1px; }

这将解决移动设备和任何已知浏览器中的问题。