我有一些像这样简单的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%。
有任何建议如何解决这个问题?
提前致谢。
答案 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%。