添加一个DIV会创建许多空白区域

Question

我有以下HTML / CSS代码：

HTML

<div id = "content-wrapper">
<div class="stickyheader"> 
       <a href="index.php"><div id="logo"></div></a>    
       <div class="nav">
            <ul class="top_nav">
               <li>Home</li>
               ...
            </ul>
        </div>
</div>
<div id="content-wrapper">
    <div class="central_img_front">Some text</div>
    <div class="welcome_container">Test</div>
</div>

...
</div>

CSS

.stickyheader {
    background-color: white;
    width: 100%;
    height: 138px;
    padding-top: 24px;
    z-index: 1;
    position: fixed;
    top: 0;
}
#content-wrapper {
    width:1000px;
    margin:0px auto;
    position: relative;
    min-height: 100%;
    height: auto !important;
    height: 100%;
    margin-top: 162px;
}
.welcome_container {
    margin: 413px auto 55px auto;
    text-align: center;
    width: 760px;
}
.central_img_front {
    background-image: url(http://modeles-de-lettres.org/test/images/slide12.jpg);
    width: 1920px;
    height: 413px;
    position:absolute;
    left:-460px;
}

完整的JSFiddle代码在这里：http://jsfiddle.net/ugnmc/

我的问题在于content-wrapper部分。这个div中有两个div：

div.central_img_front
div.welcome_container

我需要将这些div完全置于div.stickyheader之下。现在你可以在小提琴中看到，div.central_img_front被推到了太远的底部（div.stickyheader下面有很多空白区域。）如果我从HTML中移除div.welcome_container那么一切都还可以。所以，

我真的无法理解 - 为什么div.welcome_container会影响div.central_img_front？

修改

div.central_img_front

位于绝对位置，因为它位于容器（包装器）中。如果我删除position：absolute，那么它的位置不正确。

Answer 1

空格是由.welcome-container引起的，margin-top有一个巨大的.welcome_container { margin: 0px auto 55px auto; // was margin: 413px auto 55px auto; text-align: center; width: 760px; } 。

Demo

更改是：

{{1}}

Answer 2

position：absolute使div.central_img_front脱节，div.welcome_container在它之前滑入。你能把它删除吗？

Answer 3

男人，检查这些小提琴，http://jsfiddle.net/N269j/。

问题在于margings和heights。