Div 100%高度显示为0px?

时间:2013-03-15 02:00:13

标签: html css height

我目前正在建立一个网站并且有一个我似乎无法解决的小问题,我创建了一个高度为100%的div,其中div是一个滑块div,高度为100%,问题是第一个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低于它。

先谢谢你!

3 个答案:

答案 0 :(得分:12)

%单位始终相对于某个值..即使您在height: 100%;上指定了<body>,您也会注意到它的最终结果为0px,所有<div> {1}}你给了100%的高度,因为这些值是相对于它的父容器,最终是根<html>元素,当前没有明确的高度设置,所以它默认为{{1} }。如果您给根元素auto,您将获得预期的行为

答案 1 :(得分:1)

尝试给出一个高度:

html, body {
    width:100%;
    position:relative;
}

答案 2 :(得分:0)

试试这个

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

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

        </style>