如何相对于具有动态高度的容器定义div的高度百分比?

时间:2014-10-09 12:25:24

标签: html css height percentage

我有一些像这样简单的HTML:

<div id="container">
<div id="box1"><img src="images1.png" width="100%" /></div>
<div id="box2">Some text</div>
<div id="box3"><img src="image2.png" width="100%" /></div>
</div>

容器应该覆盖整个页面。我希望box2成为容器高度的20%。棘手的部分是box1和box3中图像的高度相对于视口的宽度,使容器大于浏览器窗口。

如果我只是在样式表中设置box2的百分比高度,则高度将定义为视口高度的20%,而不是容器高度的20%。

有任何建议如何解决这个问题?

提前致谢。

2 个答案:

答案 0 :(得分:1)

我相信我找到了解决问题的方法:Fiddle example

body, html{
width: 100%;
height: 100%;
}  
#container{
position: relative;
height: 100%;
}
#overlay{
position: absolute;
top: 0px;
border: 1px solid red;
z-index: 2;
width: 100%;
height: 100%;
}
#box1{
width: 100%;
}
#box2{
position: relative;
width: 100%;
z-index: 1;
}
#box3{
width: 100%;
}

<div id="container">
<div id="box1"><img src="image_40pct.jpg" width="100%" /></div>
<div id="box2"><img src="image_20pct.jpg" width="100%" />
  <div id="overlay">This text is shown above the image.</div>
</div>
<div id="box3"><img src="image_40pct.jpg" width="100%" /></div>
</div>

我知道box1和box3中图像的大小,我可以在box2中放置一个图像,其高度相当于三个图像合计的总高度的20%。然后我使用“position:absolute”和z-index将div放在该图像的顶部,高度设置为100%。任务完成:)

答案 1 :(得分:0)

我已经制作了这个Fiddle,也许你可以通过使用边距达到20%的高度:

#box2{
    margin-top: 10%;
    margin-bottom: 10%;
}

通过这种方式,您将获得10%的最高奖金和10%的最低奖金,总计20%。