CSS android and iOS problem

Question

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:

screenshot

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>

Rytis · Accepted Answer · 2011-04-01 18:33:16Z

1

That's probably the space reserved for a scrollbar.

answered Apr 1, 2011 at 18:33

Rytis

1,4451 gold badge19 silver badges39 bronze badges

Sign up to request clarification or add additional context in comments.

Comments

Robert · Accepted Answer · 2011-06-13 05:32:29Z

0

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

edited Jun 13, 2011 at 5:32

user557219

answered Jun 12, 2011 at 20:40

Robert

3212 silver badges3 bronze badges

Collectives™ on Stack Overflow

CSS android and iOS problem

2 Answers 2

Comments

Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

2 Answers 2

Comments

Comments

Your Answer

Sign up or log in

Post as a guest

Related