11

私は現在ウェブサイトを構築していて、取り組むことができない小さな問題があります.100％の高さのdivを作成しました.最初の div は 0px の高さを表示するので、スライダー div の下にある div はスライダー div の後ろに表示されます。

これが私のコードです：

.slider-container {
    width:                              100%;
    min-height:                         100%;
    background-color:                   white;
    float:                              left;
}

.main-content {
    width:                              100%;
    height:                             1000px;
    background-color:                   pink;
    float:                              left;
}

.column {
    width:                              31%;
    height:                             auto;
    background-color:                   orange;
    float:                              left
}

/* SLIDER */

.caption {
    width:                              500px;
    background-image:                   url("..//img/caption-bg.png");
    background-size:                    100%;
    position:                           absolute;
    z-index:                            99;
    overflow:                           hidden;
    margin-top:                         7%;
    margin-left:                        5%;
    -moz-border-radius:                 20px;
    border-radius:                      20px;
}

.caption-text {
    max-width:                          460px;
    overflow:                           hidden;
    margin:                             20px;
}

.wrapper .slider-container #slideshow { 
    position:                           relative; 
    width:                              100%;
    float:                              left;
}

.wrapper .slider-container #slideshow > div { 
    position:                           absolute; 
}

メイン コンテンツ div がその下にくるように、スライダー コンテナー div の高さは 100% にする必要があります。

よろしくお願いします！

4

3 に答える 3

15

%単位は常に何らかの値に対して相対的です.. で指定したとしても、100% の高さを指定height: 100%;した<body>すべてのものと同様に、最終的に 0px の高さになることに気付くでしょう。<div>これらの値は親コンテナーに対して相対的であるためです。は、現在明示的な高さが設定されていないルート<html>要素になるため、デフォルトで になりautoます。ルート要素height: 100%;を指定すると、期待される動作が得られます

于 2013-03-15T02:14:58.303 に答える
1

高さを指定してみてください:

html, body {
    width:100%;
    position:relative;
}
于 2013-03-15T02:14:13.750 に答える