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。

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

2 个答案: