[英]why height: calc(100% - 100px) is not working
运算符+
和-
需要前后的空格。 尝试calc(100% - 100px).
使用*
运算符,您不需要前面的空格。 calc(100%(1/15))
你可以使用100vh而不是100%。 vh =视口高度的1%。
.test {
height: calc(100vh - 100px);
}
下面的代码将帮助您修复div的高度.div {height:calc(100% - (20px + 30px));}工作代码如下:
html,body {
background: blue;
height:100%;
padding:0;
margin:0;
}
header {
background: red;
height: 20px;
width:100%
}
h1 {
font-size:1.2em;
margin:0;
padding:0;
height: 30px;
font-weight: bold;
background:yellow
}
#theCalcDiv {
background:green;
height: -moz-calc(100% - (20px + 30px));
height: -webkit-calc(100% - (20px + 30px));
height: calc(100% - (20px + 30px));
display:block
}
HTML代码:
<header>Some nav stuff here</header>
<h1>This is the heading</h1>
<div id="theCalcDiv">This blocks needs to have a CSS calc() height of 100% - the height of the other elements.</div>
工作示例: http : //jsfiddle.net/UF3mb/603/
声明:本站的技术帖子网页,遵循CC BY-SA 4.0协议,如果您需要转载,请注明本站网址或者原文地址。任何问题请咨询:yoyou2525@163.com.