边框溢出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>

我注意到的是，在桌面浏览器中，预计会出现2xx +偏移量从100％溢出 但是，在移动浏览器中，似乎没有任何溢出/滚动。

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

如果是这样：

• 有没有办法通过CSS为桌面浏览器调用此行为？
• 有没有办法通过CSS为移动浏览器改变这种行为？

Answer 1

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

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

Answer 2

所以是的，桌面浏览器会看到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>​