CODEWITHSUNDEEP
androidcssiosmobilemobile-safari
Nikolay
Nikolay

Reputation: 165

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:

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>

Upvotes: 0

Views: 1430

Answers (2)

Robert
Robert

Reputation: 321

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

Upvotes: 0

Rytis
Rytis

Reputation: 1445

That's probably the space reserved for a scrollbar.

Upvotes: 1

Related Questions