高度:计算(100%)在CSS中不能正常工作
高度:计算(100%)在CSS中不能正常工作
提问于 2013-04-23 16:40:45
我有一个div，我想要填充整个身体的高度，减去一个设定的像素数字。但我不能让height: calc(100% - 50px)工作。
我想这样做的原因是，我有基于一些不同标准的动态高度的元素，例如，标题的高度根据它可以包含的不同元素而变化。然后，content div需要拉伸以填充剩余的可用空间。
然而，div元素保持内容的高度-它似乎不会将100%解释为body元素的高度。
body {
background: blue;
height: 100%;
}
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: calc(100% - (20px + 30px));
display: block;
}<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>
我会感谢任何帮助或在正确的方向上的指示。
回答 4
Stack Overflow用户
回答已采纳
发布于 2013-04-23 16:56:41
您需要确保html和body设置为100%，并确保为calc、so -moz-calc、-webkit-calc添加供应商前缀。
下面是CSS工作原理：
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和body上的边距/填充设置为0，否则在添加此内容时会出现滚动条。
这是一把最新的小提琴
支持的浏览器有: IE9+、火狐16+和带有供应商前缀的火狐4+、Chrome 19+、Safari 6+
Stack Overflow用户
发布于 2013-04-23 16:49:22
尝试将html和body设置为高度100%；
html, body {background: blue; height:100%;}Stack Overflow用户
发布于 2016-02-11 20:31:24
层次结构中的所有父元素的高度应为100%。只需将max-height:100%赋给元素，将max-height:calc(100% - 90px)赋给直接父元素即可。
它在IE上也适用于我。
html,
body {
height: 100%
}
parent-element {
max-height: calc(100% - 90px);
}
element {
height:100%;
}当窗口大小调整或数据加载到DOM中时，由于Calc失败而导致IE中的渲染失败。但是上面提到的方法即使在IE中也适用于我。
页面原文内容由Stack Overflow提供。腾讯云小微IT领域专用引擎提供翻译支持
原文链接：
https://stackoverflow.com/questions/16164736
复制相关文章
相似问题