CSS android和iOS问题答案

【问题标题】：CSS android and iOS problemCSS android和iOS问题
【发布时间】：2011-04-01 16:06:51
【问题描述】：

当我尝试将 div 拉伸 100% 时，iOS 和 Android 的末尾会出现一条小线。这是一张更好看的照片：

我搜索了整个网络，但没有找到解决方案。

<html>  
<head>  
<meta charset="utf-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0, user-scalable=no, minimum-scale=1.0, maximum-scale=0.666" />  
<style>  
html, body {  
    position:relative;  
    height:100%;  
    width:100%;  
    padding:0;  
    margin:0;  
    overflow-x:hidden; 
}  
header {  
    width: 100%;  
    background: red;  
    height: 50px;  
    display: block;  
    margin: 0;  
    padding: 0;  
    overflow-x:hidden;  
}  
</style>  
</head>  
<body>  
<header>asdasd</header>  
</body>  
</html>

【问题讨论】：

标签： android css ios mobile mobile-safari

【解决方案1】：

这可能是为滚动条保留的空间。

【讨论】：

【解决方案2】：

试试这个：

header {  
    width: 100%;  
    background: red;  
    height: 50px;  
    display: block;  
    position: absolute;
    top: 0;
    right: 0;
    left: 0;
    overflow-x:hidden;  
}

然后，为了确保您的内容不会因绝对定位而出现在标题下方，请为正文标签提供与标题高度相同的顶部填充：

html, body {  
    position:relative;  
    height:100%;  
    width:100%;  
    padding:50px 0 0;  
    margin:0;  
    overflow-x:hidden; 
}

【讨论】：