Question

我在使用div时遇到了一些麻烦，我的网站有一个大小为height: 100%;的包装器，这个包装器包含各种div，如标题，滑块和内容div。唯一的问题是，由于一些错误的原因，contentt 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/

看到现场演示

希望有人可以帮助我！

谢谢！

Answer 1

在height: 100%上设置<body>会将其高度设置为视口的100％。

现在，视口与浏览器窗口的inner-height一样高;当你调整浏览器本身的大小时会发生变化。

设置为<body>的{{1}}的任何直接子项都会继承视口的高度。

这是很多“视差”网站如何做到这一点的一部分。

希望这是有道理的。

Answer 2

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

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

Answer 3

你是浮动的东西，不应该漂浮

即.header，.main-content，#slideshow - 这些都不需要花车 - 身体不应该有height:100%;

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

Answer 4

我认为问题来自滑块div height:100%

这一事实

Div不会进入包装？

4 个答案: