计算一个Div的高度,高度是基于父宽度吗?

时间:2015-05-28 10:46:50

标签: css css3

我有一个带有以下内容的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),如果是这样的话?

非常感谢:)

2 个答案:

答案 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;
}