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部分にあります。この中に 2 つdivのがありますdiv:

div.central_img_front
div.welcome_container

これらの div は、正確に の下にある必要がありますdiv.stickyheader。フィドルでわかるdiv.central_img_frontように、下に押し込まれすぎています（ の下に空白がたくさんあります） 。HTMLからdiv.stickyheader削除すると、すべて問題ありません。div.welcome_containerそう、

私は本当にそれを得ることができません - なぜ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 に答える