响应式设计中的高度并不完整

Question

我正在构建一个响应式页面，以便在移动设备和桌面设备上查看。所以，除了在我的iPad上，这一切都很好。当iPad处于垂直视图时，您可以在页脚下方看到额外的空白区域。但是，在桌面站点和移动站点中没有空格。

这是online demo，虽然这里没有显示空格，但您可以看到它如何适合窗口。

这是HTML

 <header id='header'>
    <nav id='intro'>
        top nav
    </nav>

    <div id='banner'>
      website banner
    </div>

    <nav id='main'>
            second navigation
    </nav>
</header>


<section id='content'>
    <article>
    <h1> this is content </h1>
    </article>
</section>

<footer id='footer'>
    footer
</footer>

和css

@media screen and (max-width:700px){
    aside#sidebar{ background: url(img/sidebar-bg.gif); display: block; min-height:100px; clear:both;
         border-left:1px solid #CCC;}


}

@media screen and (min-width:700px){
    aside#sidebar{float:right; display:inline; width:21%; 
                  min-height: inherit; border-left:1px solid #CCC; }

}

body{padding:0px; margin:0px; list-style-type: none; background: #efefef;}
#header{min-height: 145px;}

nav#intro{height:21px;}
div#banner{height:100px; background: url(img/banner.gif) repeat-x;}
nav#main{height:25px;  background: url(img/nav-bg.gif) repeat-x; border-bottom: 1px solid #CCC;}

#content{min-height: 600px;  background: url(img/bg.png);}

article#main{max-width: 100%; margin:auto; min-height:600px;}


footer#footer{width:inherit; min-height: 100px; background: #656565;}


nav#main ul li{float:left; margin-left:5%; }
nav#main a{text-decoration: none;  color:#efefef; font-size: 12px; font-weight: bold; font-family: arial, helvetica, sans-serif;}