[英]border overflow 100% height width body mobile browser?
<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%溢出 但是,在移动浏览器中,似乎没有任何溢出/滚动。
每个具有默认box-sizing
浏览器(移动和桌面)都应该添加2px。
尝试添加此规则:
#header,#footer,#content { box-sizing:border-box; }
给你的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; }
这将解决移动设备和任何已知浏览器中的问题。
所以,是的,桌面浏览器会看到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>
声明:本站的技术帖子网页,遵循CC BY-SA 4.0协议,如果您需要转载,请注明本站网址或者原文地址。任何问题请咨询:yoyou2525@163.com.