0

我在使用 div 时遇到了一些问题，我的网站有一个包装器大小，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/看到现场演示

4

4 回答 4

0

我不明白你的问题100％。但是我看到了一个问题，幻灯片背后的导航是因为您的幻灯片.wrapper .slider-container #slideshow > div已设置为position:absolute.

尝试将.slider-container高度设置为固定高度。否则幻灯片将在内容之上。

于 2013-03-15T12:48:36.130 回答
0

你在漂浮不应该漂浮的东西

即.header, .main-content, #slideshow- 这些都不需要浮动 - 正文不应该有height:100%;

以像素为单位给出.slide-container固定高度而不是百分比..执行上述操作将解决您的问题

于 2013-03-15T12:50:10.590 回答
0

设置它height: 100%的<body>高度为视口的 100%。

现在，视口与浏览器窗口一样高inner-height；当您调整浏览器本身的大小时，这种情况会发生变化。

, 的任何直接子级都将<body>继承height: 100%视口的高度。

这就是许多“视差”网站如何做他们的事情的一部分。

于 2013-03-15T12:38:10.433 回答
-1

我认为问题出在滑块 div 有height:100%

于 2013-03-15T12:34:29.730 回答