我目前正在建立一个网站并且有一个我似乎无法解决的小问题,我创建了一个高度为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低于它。
先谢谢你!
答案 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>