1

パララックスを使ったWebサイトを作ろうとしています。

CSSで悩んでいます。以下は HTML です。

<div id="skrollr-body">

        <div class="subnav"> 
            <ul  id="nav">
                <li><a href="#home">Home</a></li>
                <li><a href="#foo">Foo</a></li>

            </ul> 
        </div>


            <div id="home" class="centered" data-0="height:100%;" data-1000="height:0%;" > 
                <div class="zebra">
                     <div class="contentWrap">

                          test

                     </div>         
                </div> 
            </div>


            <div id="foo" class="centered" data-1000="height:100%;" data-2000="height:0%;">
                <div class="world">
                         <div class="contentWrap">

                              test

                         </div>         
                 </div> 

            </div> 
</div>

そしてここにcssがあります：

#home {  
    background: #dedede;
    height: 100%;
    z-index: 901;
} 
#foo{background: yellow; z-index:800;}  

.zebra {
    background-image: url("/img/zebra-pattern.png");
    background-position: center center;
    background-repeat: repeat-x;
    background-size: cover;
    height: 100%;
    position: relative;
    width: 100%;
}

.world {
    background-image: url("/img/world.jpg");
    background-position: center center;
    background-repeat: repeat-x;
    background-size: cover;
    height: 100%;
    position: relative;
    width: 100%;
}

.contentWrap{ 
    position: absolute; 
    border: 1px solid red;
}

私の問題は、高さを明示的に設定しないと、背景画像が全画面表示にならないことです。

何かアドバイス？

4

2 に答える 2

1

パーセンテージの高さが要素で機能するには、その親に何らかの高さが設定されている必要があります。その親の高さもパーセンテージにすることができますが、その場合、そのパーセンテージが機能するには、それ自身の親にも何らかの高さが設定されている必要があります。そして、これは html 要素まで続きます。

あなたの場合、要素#skrollr-bodyの直接の子である場合はbody、これをスタイルシートに含める必要があります。

html,
body, 
#skrollr-body {
    height: 100%;
}
于 2013-01-06T03:32:45.737 に答える