gol*_*enk 55 html css css3 viewport-units css-calc
从我在其他 答案中看到的,CSS视口单元还不能在calc()语句中使用.我想要实现的是以下声明:
height: calc(100vh - 75vw)
是否有一些解决方法我可以使用纯CSS实现这一点,即使视口单元不能在calc()语句中使用？或者只是CSS和HTML？我知道我可以使用javascript动态地完成它,但我更喜欢CSS.
Dan*_*eld 65
在我回答这个问题之前,我想指出Chrome和IE 10+实际上支持使用视口单元进行计算.
1)通过将高度设置为100vh开始.
2)将盒子大小设置为边框 - 添加75vw的填充顶部.这意味着填充将是内部高度的一部分.
3)只需用负边距顶部抵消额外的填充顶部
div
{
/*height: calc(100vh - 75vw);*/
height: 100vh;
margin-top: -75vw;
padding-top: 75vw;
-moz-box-sizing: border-box;
box-sizing: border-box;
background: pink;
}
作为一种解决方法,您可以使用百分比垂直填充和边距从容器宽度计算.这是一个非常丑陋的解决方案,我不知道你是否能够使用它,但它很有效,它可以工作:http://jsfiddle.net/bFWT9/
<!DOCTYPE html>
<html>
<head>
<title></title>
</head>
<body>
<div>It works!</div>
</body>
</html>
html, body, div {
height: 100%;
}
body {
margin: 0;
}
div {
box-sizing: border-box;
margin-top: -75%;
padding-top: 75%;
background: #d35400;
color: #fff;
}
<div>It's working fine.....</div>
div
{
height: calc(100vh - 8vw);
background: #000;
overflow:visible;
color: red;
}
在这里检查此CSS代码现在支持所有没有Opera的浏览器
生活