我有一个带有以下内容的div(浓缩为仅显示相关的)CSS属性:
.container{
position:relative;
box-sizing:border-box;
width:calc(100% - 80px);
margin-left:40px;
height:calc(100% - 80px);
}
在其中我有三个div,顶部包含介绍性文本,中间一个包含内容,底部一个用于访客评论。中间的一个将是照片幻灯片,视频剪辑,地图等。所以需要是一个特定的宽高比,给定宽度是流动我使用以下(样本2:1比例)CSS:
.videoplayer{
position:absolute;
box-sizing:border-box;
width:calc(100% - 40px);
left:20px;
top:50%;
height:0px;
padding-top:calc(25% - 10px);
padding-bottom:calc(25% - 10px);
transform:translate(0,-50%);
}
通过使用零高度并从%垂直填充创建高度,它根据父级的宽度动态创建它的高度,然后顶部:50%;和transform:translate(0,-50%);将它集中在父div中。
我遇到的问题是我希望在这个上方和下方的div适合它上面和下面的剩余空间,我不知道如何计算它们的高度!
我要找的最终结果是:THIS
任何人都知道这是否可行(理想情况下使用纯CSS),如果是这样的话?
非常感谢:)
答案 0 :(得分:1)
在我的情况下,我希望我的屏幕在所有PC桌面浏览器,所有移动浏览器,所有Android手机和所有iPhone中看起来都一样。
所以我将外部div高度设置为屏幕可用高度。我有3个内部div,顶部div高度=屏幕高度/ 14,底部div高度=屏幕高度/ 14,中间div高度=屏幕高度* 12/14
我从不使用类似20px的东西,因为每个屏幕的20px都不同,我使用(屏幕高度/某个数字)px而不是
答案 1 :(得分:1)
非常感谢@ David-Thomas将我指向灵活方向,我设法将其解决了!以下解决方案,以防其他人遇到同样的问题。
.videocontainer{ /* PARENT DIV - FLUID HEIGHT TO FILL VIEWPORT */
position:relative;
box-sizing:border-box;
width:calc(100% - 80px);
margin-left:40px;
height:calc(100% - 80px);
display:inline-flex;
flex-direction:column;
justify-content:center;
align-content:stretch;
align-items:stretch;
}
.videotext{ /* DIV HEIGHT FLUID TO FILL SPACE ABOVE */
flex:1;
width:calc(100% - 40px);
margin-left:20px;
margin-top:20px;
margin-bottom:20px;
box-sizing:border-box;
}
.videoplayer{ /* DIV HEIGHT FIXED RATIO TO WIDTH */
box-sizing:border-box;
width:calc(100% - 40px);
margin-left:20px;
height:0px;
padding-top:calc(25% - 10px);
padding-bottom:calc(25% - 10px);
}
.videocomments{ /* DIV HEIGHT FLUID TO FILL SPACE BELOW */
flex:1;
width:calc(100% - 40px);
margin-left:20px;
margin-top:20px;
margin-bottom:20px;
box-sizing:border-box;
}