我正在建立一个网站并且有一个我似乎无法解决的小问题,我创建了一个高度为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低于它.
谢谢你的提前！
解决方法
％单位总是相对于某个值..即使你指定了高度：100％;在你的< body>上你会注意到它最终都是0px高,因为所有的< div>你给了100％的高度,因为这些值是相对于它的父容器,最终是根< html>当前没有明确高度设置的元素,因此默认为auto.如果你给根元素高度：100％;你会得到预期的行为
