[英]Set div height in % inside a div with height and width 100%
I have the current html structure 我有当前的html结构
<release_cover>
<overlay_controllers> Green Div </overlay_controllers>
<img src="blu.div" />
</release_cover>
And I want to achieve 我想实现
this:
这个:
The img tag is the blue container. img标签是蓝色的容器。 The magenta is the release_cover tag.
洋红色是release_cover标记。
I have problem in setting the overlay_controller tag (the green) at a 20% height, exactly positioned at 80% of the container. 我在将overlay_controller标记(绿色)设置为20%的高度(恰好位于容器的80%的高度)时遇到问题。
So far i did: 到目前为止,我做到了:
release_cover{
width: 100%;
height: 100%;
position: relative;
}
release_cover img{
width: 100%;
height: 100%;
}
overlay_controllers{
min-height: 20%;
margin-top: 80%;
position: absolute;
width: 100%;
}
Unfortunately the height of the green div depends on what's inside and not a fixed 20%. 不幸的是,绿色div的高度取决于内部内容,而不是固定的20%。
Suggestions? 有什么建议吗?
(example with the suggestions received so far: https://jsfiddle.net/82Lb0nhe/ ) (例如,到目前为止收到建议的示例: https : //jsfiddle.net/82Lb0nhe/ )
You could position overlay_controllers using top instead of margin-top property: 您可以使用top而不是margin-top属性来定位overlay_controllers:
release_cover {
width: 100%;
height: 100%;
position: relative;
display: block;
}
release_cover img {
width: 100%;
height: 100%;
}
overlay_controllers {
position: absolute;
top: 80%;
height: 20%;
width: 100%;
overflow: hidden;
}
Using a combination of absolute
position along with top
, while also not allowing a height
greater than 300px
it will compute correctly: 使用
absolute
位置和top
的组合,同时也不允许height
大于300px
,它将正确计算:
.container {
width: 300px;
height: 300px;
}
overlay_controllers {
z-index: 2;
bottom: 0%;
position: absolute;
margin-top:;
height: 20%;
width: 100%;
background-color: #fc0;
}
release_cover {
top: 0px;
width: 100%;
position: relative;
display: block;
overflow: hidden;
margin: 0px;
padding: 0px;
max-height: 300px;
}
release_cover img {
padding: 0;
margin: 0px;
z-index: 1;
width: 100%;
height: 100%;
}
Working fiddle: https://jsfiddle.net/fL98w9of/ 工作提琴: https : //jsfiddle.net/fL98w9of/
声明:本站的技术帖子网页,遵循CC BY-SA 4.0协议,如果您需要转载,请注明本站网址或者原文地址。任何问题请咨询:yoyou2525@163.com.