11

我目前正在建立一个网站并且有一个我似乎无法解决的小问题，我创建了一个高度为 100% 的 div，在该 div 内部是一个高度为 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 应该有 100% 的高度，以便主要内容 div 低于它。

提前感谢您！

4

3 回答 3

15

单位总是相对于%某个值..即使你已经指定height: 100%;了<body>你会注意到它最终是 0px 高，<div>因为你给了 100% 高度，因为这些值是相对于它的父容器的，它最终成为<html>当前没有明确设置高度的根元素，因此默认为auto. 如果您给出根元素height: 100%;，您将获得预期的行为

于 2013-03-15T02:14:58.303 回答
1

尝试给一个高度：

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

尝试这个

    <style type="text/css">
html {
    height: 100%;
}

body {
    text-align: center;
    height: 100%; 
}

        </style>
于 2015-10-15T06:32:03.100 回答