[英]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.