javascript 为什么高度：calc(100% - 100px) 不起作用
声明：本页面是StackOverFlow热门问题的中英对照翻译，遵循CC BY-SA 4.0协议，如果您需要使用它，必须同样遵循CC BY-SA许可，注明原文地址和作者信息，同时你必须将它归于原作者（不是我）：StackOverFlow
原文地址: http://stackoverflow.com/questions/19599832/
Warning: these are provided under cc-by-sa 4.0 license. You are free to use/share it, But you must attribute it to the original authors (not me):
StackOverFlow
why height: calc(100% - 100px) is not working
提问by Mojtaba Nazarzade
回答by ajSkyrocket
The operators +and -require whitespace before and after. Try calc(100% - 100px).With the *operator you don't need whitespace ex. calc(100%(1/15))
运算符+和-前后都需要空格。尝试calc(100% - 100px).使用*运算符，您不需要空格 ex。calc(100%(1/15))
回答by Mojtaba Nazarzade
you can use 100vh instead 100%. vh = 1% of the height of the viewport.
您可以使用 100vh 代替 100%。vh = 视口高度的 1%。
.test {
height: calc(100vh - 100px);
}
回答by Nick Rolando
Why are there multiple heightcss styles for #wrap?
为什么有多种heightcss 样式#wrap？
Try taking off height: auto !important;
尝试起飞 height: auto !important;
回答by SantoshK
below code will help you to fix the height the div .div{height: calc(100% - (20px + 30px));} working code as below :
下面的代码将帮助您修复 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 code :
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>
Working Example : http://jsfiddle.net/UF3mb/603/
