1

我有以下 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部分。这里面有两个divs div：

div.central_img_front
div.welcome_container

我需要那些 div 正好在div.stickyheader. 现在正如您在小提琴中看到的那样，div.central_img_front被推到底部太远（下面有很多空白div.stickyheader）。如果我div.welcome_container从 HTML 中删除，那么一切正常。所以，

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

编辑：

div.central_img_front

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

4

3 回答 3

2

这个空白是由 造成的.welcome-container，里面有一个巨大的margin-top。

演示

变化是：

.welcome_container {
    margin: 0px auto 55px auto; 
    // was margin: 413px auto 55px auto;
    text-align: center;
    width: 760px;
}
于 2013-07-07T11:54:52.053 回答
1

position:absolute 使 div.central_img_front 脱节，而 div.welcome_container 滑入它之前。你能把它去掉吗？

于 2013-07-07T11:56:41.273 回答
0

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

问题是margings和heights。

于 2013-07-07T11:55:23.813 回答