底部页脚不会停留在横向模式iOS 7

Question

我几乎完成了我的网站，但我有一个小问题。

我有一个固定的标题和固定页脚在我的网站上的响应式布局。

所有作品就像我想要的，除了当我“倾斜”我的手机“风景”模式。然后网站在底部创建一个“填充/页边空白”，页脚被“强制”，并在底部创建一个灰色边框。页脚跟随内容。

但这是事情。它在我的其他页面上有更多的内容（用于滚动），但不在我的索引页上只有一些联系信息。

当我向索引页面添加更多文本时，它变得很正常。

任何人都知道我做错了什么，可以帮助吗？

我认为有一个简单的解决方法，但我似乎无法找到它。

<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

如果您在Safari浏览器（iOS7）上获取了您网站的灰色区域，则可能只是您的视口。添加到viewport meta: (height="device-height")可能会解决您的问题。