Bottom footer won't stay down in landscape mode iOS 7

Question

I'm almost done with my website but I have one little problem.

I have have a fixed header and fixed footer on my site with a responsive layout.

All works just like I want it, except when i "tilt" my phone to "landscape" mode. Then the site creates a "padding/margin" at the bottom and the footer gets "forced" up with the content creating a grey border at the bottom. The footer follows the content.

But here's the thing. It works fine on my other pages that have more content (for scrolling) but not on my index page that only have some contact info.

When I add more text to the index page it becomes normal.

Anyone know what I'm doing wrong and can help?

I assume there is a easy fix for this but I can't seem to find it.

<title>Name</title>
<meta charset="utf-8">
<link rel="shortcut icon" href="images/icons/favicon.ico">
<link rel="stylesheet" href="style/structure.css">
<meta name="viewport" content="width=device-width, initial-scale=1, minimum-scale=1.0, maximum-scale=1.0, user-scalable=0, minimal-ui" />

<?php include("style/header.php"); ?>

<div class="container">

        <div class="content">

        <h1>
            Name
            <br>
            Tlf: Tlf
            <br>
            E-post: <a href="#">mail</a>
        </h1>               

        </div>  <!-- END CONTENT -->

</div> <!-- END CONTAINER -->

<?php include("style/footer.php"); ?>

* {
margin: 0px;
padding: 0px;
}

body {
margin: 0 auto;
width: 90%;
clear: both;
background-color: #FFFFFF;
color: #444444;
font-size: 87.5%; /* 14px */
font-family: times, 'timesnewroman', 'times new roman', 'bakersville', serif;
line-height: 1.5;
-webkit-font-smoothing: 'antialiased';
position: relative;
display: block;
}

header {
height: 40px;
width: 90%;
position: fixed;
z-index: 1;
border-bottom: 1px solid rgba(136, 136, 136, 0.4);
background-color: #FFFFFF;
top: 0;
display: block;
}

footer {
width: 90%;
height: 35px;
float: left;
border-top: 1px solid rgba(136, 136, 136, 0.4);
text-align: center;
position: fixed;
bottom: 0;
background-color: #FFFFFF;
padding-top: 5px;
display: block;
}

.container {
max-width: auto;
min-height: auto;
float: none;
display: block;
text-align: center;
}

.content {
background-color: #ffffff;
color: #999999;
margin: 0 auto;
display: block;
padding-top: 40px;
padding-bottom: 40px;
}

.content h1 {
color: #000000;
float: left;
font-size: 13px;
line-height: 1.3;
font-weight: normal;
font-family: helvetica;
text-align: left;
}

Answer 1

If you get the grey area in your site on safari (iOS7) it might just be your viewport. Adding to the viewport meta: (height="device-height") will probably solve you problem.