chrome for mobile ignores height 100%

Question

I have this html: http://jsfiddle.net/nsabu/

<!doctype html>
<html lang="en">
<head>
    <style>
    html, body, img {
        height: 100%;
    }
    body {
        padding: 0;
        margin: 0;
    }
    </style>
</head>

<body>
    <img src="https://s3.amazonaws.com/dev.storage.mediabox.io/1/_content/664536771c9060e8459805d4ed7103fa-40/198-40_100_2.jpg?AWSAccessKeyId=ASIAJNMOEPRUOJXCJJ5Q&Expires=1356669400&Signature=Su6bomRoQ8FT6yllzIzPGGyaqWU%3D&x-amz-security-token=AQoDYXdzENr%2F%2F%2F%2F%2F%2F%2F%2F%2F%2FwEa0AFP2Myc69na3yO7inJ7d9KqZwS620cUDmdLiSIQmtR3wrgxetmy1N3JNCVAdz1mOTqqwKiKpPXY5dVf0OxTBY%2BLUoAovSz9OjUojB0JQlXqMVeNbAzhq723O32OZR08l6F2S0oyIOgwjr%2FGkzj2JhNunzfido49SdTjEiX2p5WozIVODRqnxkqrXrDL4z1vMunQkivQ8U2VKlL4s8z3mEwd3tvWUaOu0%2B%2BUFvHiGH23V05pXQEnZnlLKQ%2B6NNwmmp2Rt5EsmMvvTJi4CYbjM6cJIJjP7IYF" />
</body>
</html>

When I run it on chrome I get 100% height for the image. When I ran it on tablet or mobile phone with chrome, the browser ignores the 100% height. What is the problem? How can I tell the chrome mobile browser consider the height?

@popnoodles: I didn't add viewport as you can see. Is something like this missing here? — Naor, Dec 26 '12 at 17:05

score 3 · Answer 1 · edited May 23 '17 at 12:30

3

Try height: 100vh; instead (CSS3, supported in all browsers). It may solve your troubles. For further informaiton see here: https://stackoverflow.com/a/16837667

edited May 23 '17 at 12:30

Community

1
1

answered Dec 04 '14 at 10:29

Karolína Vyskočilová

1,305
1
18
29

score 1 · Accepted Answer · answered Dec 26 '12 at 17:08

Add the viewport tag

<!doctype html>
<html lang="en">
<head>
    <meta name="viewport" content="initial-scale=1"/>
    <style>
    html, body, img {
        height: 100%;
    }
    body {
        padding: 0;
        margin: 0;
    }
    </style>
</head>

<body>
    <img src="https://s3.amazonaws.com/dev.storage.mediabox.io/1/_content/664536771c9060e8459805d4ed7103fa-40/198-40_100_2.jpg?AWSAccessKeyId=ASIAJNMOEPRUOJXCJJ5Q&Expires=1356669400&Signature=Su6bomRoQ8FT6yllzIzPGGyaqWU%3D&x-amz-security-token=AQoDYXdzENr%2F%2F%2F%2F%2F%2F%2F%2F%2F%2FwEa0AFP2Myc69na3yO7inJ7d9KqZwS620cUDmdLiSIQmtR3wrgxetmy1N3JNCVAdz1mOTqqwKiKpPXY5dVf0OxTBY%2BLUoAovSz9OjUojB0JQlXqMVeNbAzhq723O32OZR08l6F2S0oyIOgwjr%2FGkzj2JhNunzfido49SdTjEiX2p5WozIVODRqnxkqrXrDL4z1vMunQkivQ8U2VKlL4s8z3mEwd3tvWUaOu0%2B%2BUFvHiGH23V05pXQEnZnlLKQ%2B6NNwmmp2Rt5EsmMvvTJi4CYbjM6cJIJjP7IYF" />
</body>
</html>

This is not working.. The image still don't have 100% height on mobile device with chrome. If you have an android device with chrome you can check it and see. — Naor, Dec 27 '12 at 08:02

chrome for mobile ignores height 100%

2 Answers2