高度：calc（100％）在CSS中无法正常工作
我有一个div，我要填充整个身体高度，而不要填充以像素为单位的设定值。但是我不能height: calc(100% - 50px)上班。
我要执行此操作的原因是，我的元素具有基于某些不同标准的动态高度，例如，标头的高度根据其可以包含的不同元素而变化。然后，内容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>
我将不胜感激任何帮助或朝着正确方向的指点。
问题答案：
您需要确保将html和body设置为100％，还必须确保为calc添加供应商前缀，因此-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上将margin / padding设置为0，否则将添加滚动条。
浏览器支持：IE9 +，Firefox 16+以及供应商前缀Firefox 4 +，Chrome 19 +，Safari 6+
-
问题内容： 这个问题已经在这里有了答案 ： 高度百分比HTML 5 / CSS （6个答案） 3年前关闭。 我有以下简单的代码： 但是div不会以高度为100％显示。为什么？ 问题答案： 您需要在所有父元素上设置100％的高度，在这种情况下，您的正文和html都应设置为100％。这个小提琴显示它正常工作。
-
问题内容： 我有一个网站，我决定用纯CSS代码段替换基于jquery的切换框。当我使用固定的高度值进行过渡时（CSS的最后几行），效果很好，但是使用该值时，动画丢失了，只有高度变化才起作用！ 有没有办法将其与自动值一起使用？我想使用可变文本而不使用脚本。 问题答案： 如果您只想使用CSS，则一种解决方案是过渡而不是将其设置为比以往任何时候都更大的值… 您将需要稍稍缩短转换的速度，但是至少该示例使您
-
问题内容： 数小时以来，我一直在脑海中摸索，试图找出这个问题，并认为这一定是我所缺少的。我已经在网上搜索过，但没有发现有效的方法。HTML是： 我的完整CSS是： 我希望侧边栏可以随着页面内容的高度而扩展，而将侧边栏底部的图像始终保留在侧边栏的底部。 问题答案： 更新： 因为这个答案仍然在上下投票，并且在撰写本文时已经 八岁了 ：现在可能有更好的技术。原始答案如下。 显然，您正在寻找Faux列技术
-
问题内容： 我想使用哪种功能可以完美地满足我的需求，唯一的问题是它的兼容性。目前，它仅适用于最新的浏览器，而不适用于Safari。 我可以使用jQuery替代吗？即。获取对象的100％宽度-100px，然后将结果动态设置为CSS宽度（这样它就会响应） 问题答案： 如果您使用的浏览器不支持该表达式，则使用jQuery模仿它并不难： 让jQuery处理相对计算要比自己完成要容易得多。
-
问题内容： 我尝试了响应式CSS布局，但是“ top：50％”不能工作，而“ left：50％”可以。为什么会这样呢？ 问题答案： 定义父容器的尺寸，例如div： 要么 另一种方法是通过其顶部，底部，左侧和右侧属性来拉伸父容器（即div）。像这样：
-
问题内容： 我正在使用svg图像作为背景。我正在尝试使用CSS3，但即使在应支持CSS3的浏览器（例如Chrome）中，它也似乎无法正常工作。 如果您查看此站点，将会看到（在食物图片的右侧/下方）带有红色横幅背景的背景。请注意，当您缩小窗口时，背景图像的高度会下降以保持其比例，而不是像我想要的那样拉伸。 编辑：我在FireFox上检查了它，它可以正常工作…所以这似乎是一个webkit问题。 编辑：