标题容器和主内容容器之间的未知间隙

Question

我在标题容器和主容器之间存在一个神秘的间隙。您可以看到顶部容器和主容器之间的白色大间隙。我已经添加了一个红色的边框，使其更容易被发现。

<div id="header"> 

    <div class="container"> 

     <div id="logo"> 
      <h1>Haier</h1> 
      <img src="images/logo.jpg"/> 
     </div> 

     <form id="search"> 
      <input type='search' placeholder='Enter your Claim ID to track it&rsquo;s progress' id="search-box" /> 
      <!--t id="submit" type="submit" value="Search" id="search-button" />--> 
      <button type="submit" value="Search" class="button_submit">Search</button> 
     </form> 

     <ul id='menu'> 
      <li class="active"><a href="">Home</a></li> 
      <li><a href="">Qualifying Purchases</a></li> 
      <li><a href="">FAQs</a></li> 
      <li><a href="">Terms and Conditions</a></li> 
      <li><a href="">Contact Us</a></li> 
      <li class="claim"><a href="">Claim</a></li> 
     </ul>  

    </div> 

</div> 

<div id="main"> 

    <div class="container"> 

     <div id="block_content"> 

      Main 

     </div>   

    </div> 

</div> 

这里是CSS：

* { 
    margin:0; 
    padding:0; 
} 

body { 
    margin:0px; padding:0px; 
    background-color:#d2d3d5; 
} 
#header { 
    background:white; 
    min-height: 150px; 
} 
#main { 
    background:white url(images/background_slice.jpg) repeat-x; 
} 
#footer { 
    color:#9a9a9b; 
} 
.container { 
    overflow: auto; 
    border:1px solid red; 
} 

#header { 
    padding-top:20px; 
} 

这里是当前页面的实时预览链接： http://goo.gl/8rwiCR

任何帮助表示赞赏。

Answer 1

这是因为您已将min-height: 150px;设置为标题并且标题大小小于此值。

#header { 
    background: #FFF none repeat scroll 0% 0%; 
    min-height: 150px; 
} 

更改或删除。

Answer 2

这是因为您将最小高度设置为#header。