Div не занимает всю высоту страницы в Safari для iPhone и iPad
У меня были проблемы с получением элементов моей страницы, чтобы заполнить 100% высоты области просмотра в мобильном Safari (iPhone и iPad). У меня есть элемент, который содержит элементы моей страницы, для которых задана высота 100% (а также для HTML и Body задано значение высоты 100%), и это ДОЛЖНО заполнить 100% высоты области просмотра.
Проблема состоит в том, что 3 дочерних элемента контейнера (.main-header:10%, .main-content:80% и.main-footer:10%), которые составляют до 100% высоты, все еще имеют небольшой размер (около 2 пикселей).) пробел внизу страницы, где я могу видеть фон родительского элемента (.page).
Если бы кто-то еще испытал и решил эту проблему, я был бы чрезвычайно благодарен за любую помощь.
Спасибо!
Вы можете увидеть мой урезанный HTML/CSS на этой скрипке: http://jsfiddle.net/Rockstar79/zpTtF/
Вот полный код с метатегами и т. Д.
CSS
html {
width: 100%;
height: 100%;
margin: 0;
padding: 0;
}
body {
width: 100%;
height: 100%;
margin: 0;
padding: 0;
}
div {
margin: 0;
padding: 0;
}
h1,h2,h3,h4,h5,h6,
p {
font-size: 100%;
margin: 0;
padding: 0;
}
.page {
width: 100%;
height: 100%;
position: relative;
margin: 0;
padding: 0;
}
.main-header {
width: 100%;
height: 10%;
position: relative;
}
.main-content {
width: 100%;
height: 80%;
position: relative;
background-color: yellow;
}
.main-footer {
width: 100%;
height: 10%;
position: relative;
}
.main-header,
.main-footer {
background-color: blue;
}
HTML
<!doctype html>
<html>
<head>
<meta charset="utf-8">
<title>Plain Mobile Test</title>
<meta name="viewport" content="width=device-width, initial-scale=1.0, minimum-scale=1.0, maximum-scale=1.0, user-scalable=no">
<link type="text/css" rel="stylesheet" href="css/main.css" />
</head>
<body>
<div class="page" id="page-1">
<div class="main-header">
<h1>Header</h1>
</div>
<div class="main-content">
<p>
Lorem ipsum dolor sit amet, consectetur adipisicing elit. Amet sunt aut libero sequi distinctio molestias nulla quidem fugiat. Maxime voluptates.
</p>
</div>
<div class="main-footer">
<h3>Footer</h3>
</div>
</div>
</body>
</html>