0

我有以下 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 来扭转这种行为？
4

2 回答 2

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。但是如果你只有这个媒体查询，可能你实际上并不需要它（它会被简单地忽略）。

浏览器（IE8+，其他所有）都很好地支持该box-sizing属性，我认为您不需要 IE7 的后备（全球不到 2% 的用户）。

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

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

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

于 2012-10-01T23:49:05.360 回答
1

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

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

所以我会使用 box-sizing，但是在 IE7 和后面添加一个 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>​
于 2012-10-01T23:55:02.680 回答