css - div はラッパーに入りませんか?

Question

私のウェブサイトには 1 つのラッパーサイズがありheight: 100%;、このラッパーにはヘッダー、スライダー、コンテンツ div などのさまざまな div が含まれています。唯一の問題は、なんらかの不思議な理由でコンテンツ div がラッパー div から押し出されることです。

html {
    overflow-y:                         scroll;
    height:                             100%;
    position:                           relative;
}

a {
    outline:                            none;
}

img {
    width:                              100%;
    border:                             none;
    -moz-border-radius:                 20px;
    border-radius:                      20px;
}

body {
    width:                              100%;
    height:                             100%;
    background-color:                   yellow;
    margin:                             0px 0px 0px 0px;
}

.wrapper {
    width:                              87%;
    height:                             100%;
    background-color:                   red;
    margin:                             0 auto;
}

.header {
    width:                              100%;
    height:                             150px;
    background-color:                   green;
    float:                              left;
    overflow:                           hidden;
}

.logo {
    width:                              7%;
    height:                             114px;
    margin:                             18px 0% 18px 3%;
    float:                              left;
    background-image:                   url("..//img/logo.png");
    background-size:                    100%;
    background-repeat:                  no-repeat;  
}

.slogan {
    width:                              30%;
    height:                             100px;
    background:                         orange;
    margin:                             25px 13% 25px 13%;
    float:                              left;
}

.nav {
    width:                              31%;
    height:                             150px;
    background-color:                   purple;
    float:                              left;
    margin:                             0% 3% 0% 0%;
}

.search {
    width:                              100%;
    height:                             50%;
    background:                         blue;
    float:                              left;
}

.menu {
    width:                              100%;
    height:                             50%;
    float:                              left;
    background:                         grey;
}

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

.main-content {
    width:                              100%;
    height:                             100px;
    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 { 
    float:                              left;
    position:                           relative; 
    width:                              100%;
}

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

http://k2stuc.nl/test/でライブデモを見ることができます。

score 0 · Accepted Answer

あなたの質問が100%理解できません。しかし、問題が発生しました。スライドショーの背後にあるナビゲーションは、スライド.wrapper .slider-container #slideshow > divがに設定されているためposition:absoluteです。

.slider-container高さを固定の高さに設定してみてください。そうしないと、スライドがコンテンツの上に表示されます。

score 0 · Accepted Answer

あなたは浮かんではいけないものを浮かんでいる

すなわち.header、 - これら.main-contentの#slideshowいずれも float を必要としない - body は持つべきではないheight:100%;

.slide-containerパーセンテージではなくピクセル単位で固定の高さを指定します..上記を実行すると問題が解決します

score -1 · Accepted Answer

-1

問題は、スライダーのdivにあるという事実にあると思いますheight:100%

于 2013-03-15T12:34:29.730 に答える

css - div はラッパーに入りませんか?

4 に答える 4

Related

Reference