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％。然后我使用“position：absolute”和z-index将div放在该图像的顶部，高度设置为100％。任务完成:)

Answer 2

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

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

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

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

2 个答案: