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

Question

我有一些像这样的简单 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%。

有什么建议可以解决这个问题吗？

提前致谢。

Answer 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% 的图像。然后我使用“位置：绝对”和 z-index 在该图像顶部放置一个 div，高度设置为 100%。任务完成:)

Answer 2

我做了这个Fiddle，也许你可以通过使用边距来达到20%的高度：

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

这样你将有 10% 的顶部和 10% 的底部，总共 20%。