CSS android and iOS problem
When i try to stretch a div 100% there is a little line at the end in iOS and Android. Here's a pic for better view:
I searched all over the net but i didn't find a solution.
<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>
That's probably the space reserved for a scrollbar.
Try this:
header {
width: 100%;
background: red;
height: 50px;
display: block;
position: absolute;
top: 0;
right: 0;
left: 0;
overflow-x:hidden;
}
Then to make sure your content doesn't wind up under the header due to absolute positioning, give the body tag the same top padding as the height of the header:
html, body {
position:relative;
height:100%;
width:100%;
padding:50px 0 0;
margin:0;
overflow-x:hidden;
}
加载中,请稍侯......
精彩评论