高度：calc(100%) 在 CSS 中无法正常工作
声明：本页面是StackOverFlow热门问题的中英对照翻译，遵循CC BY-SA 4.0协议，如果您需要使用它，必须同样遵循CC BY-SA许可，注明原文地址和作者信息，同时你必须将它归于原作者（不是我）：StackOverFlow
原文地址: http://stackoverflow.com/questions/16164736/
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
height: calc(100%) not working correctly in CSS
提问by elizabethmeyer
I have a div that I want to fill the whole height of the body less a set number in pixels. But I can't get height: calc(100% - 50px)to work.
我有一个 div，我想填充整个身体的高度，减去一个以像素为单位的数字。但是我不能height: calc(100% - 50px)上班。
The reason I want to do this is I have elements that have dynamic heights based on some varying criteria, e.g. height of the header changes based on different elements it can contain. A content div then needs to stretch to fill the rest of the available space available.
我想要这样做的原因是我的元素具有基于一些不同标准的动态高度，例如标题的高度根据它可以包含的不同元素而变化。然后，内容 div 需要拉伸以填充剩余的可用空间。
The div element, however, stays the height of the content - it doesn't seem as if it interprets 100% to be the height of the body element.
然而， 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>I would appreciate any help or pointers in the right direction.
我将不胜感激任何正确方向的帮助或指示。
回答by daamsie
You need to ensure the html and body are set to 100% and also be sure to add vendor prefixes for calc, so -moz-calc, -webkit-calc.
您需要确保将 html 和 body 设置为 100%，并确保为 calc 添加供应商前缀，例如 -moz-calc、-webkit-calc。
Following CSS works:
以下 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
}
I also set your margin/padding to 0 on html and body, otherwise there would be a scrollbar when this is added on.
我还在 html 和 body 上将您的边距/填充设置为 0，否则添加时会出现滚动条。
Here's an updated fiddle
这是一个更新的小提琴
Browser support is: IE9+, Firefox 16+ and with vendor prefix Firefox 4+, Chrome 19+, Safari 6+
浏览器支持：IE9+、Firefox 16+ 和供应商前缀 Firefox 4+、Chrome 19+、Safari 6+
回答by Kickass
First off - check with Firebug(or what ever your preference is) whether the css property is being interpreted by the browser. Sometimes the tool used will give you the problem right there, so no more hunting.
首先 - 检查 Firebug（或您的偏好）是否浏览器正在解释 css 属性。有时，所使用的工具会给您带来问题，因此无需再寻找。
Second off - check compatibility: http://caniuse.com/#feat=calc
第二关 - 检查兼容性：http: //caniuse.com/#feat=calc
And third - I ran into some problems a few hours ago and just resolved it. It's the smallest thing but it kept me busy for 30 minutes.
第三 - 几个小时前我遇到了一些问题并刚刚解决了它。这是最小的事情，但它让我忙了 30 分钟。
Here's how my CSS looked
这是我的 CSS 的样子
#someElement {
height:calc(100%-100px);
height:-moz-calc(100%-100px);
height:-webkit-calc(100%-100px);
}
Looks right doesn't it? WRONG Here's how it should look:
看起来对不对？错误的外观如下：
#someElement {
height:calc(100% - 100px);
height:-moz-calc(100% - 100px);
height:-webkit-calc(100% - 100px);
}
Looks the same right?
看起来一样吧？
Notice the spaces!!!Checked android browser, Firefox for android, Chrome for android, Chrome and Firefox for Windows and Internet Explorer 11. All of them ignored the CSS if there were no spaces.
注意空格！！！检查了安卓浏览器，安卓火狐浏览器，安卓浏览器，Chrome和火狐浏览器Windows和Internet Explorer 11。如果没有空格，他们都忽略了CSS。
Hope this helps someone.
希望这可以帮助某人。
回答by GraphiX
I was searching why % doesn't seem to work. So, I tested out using 100vh instead of just setting it at 100% it seems that 100vh works really well across almost all browsers/devices.
我正在寻找为什么 % 似乎不起作用。因此，我使用 100vh 进行了测试，而不是仅仅将其设置为 100%，似乎 100vh 在几乎所有浏览器/设备上都运行良好。
example: you want to only display the top div to the user before it scrolls, like a hero banner module. But, at the top of the page is a navbar which is 68px in height. The following doesn't work for me at all doing just %
示例：您只想在滚动之前向用户显示顶部 div，如英雄横幅模块。但是，页面顶部是一个高度为 68px 的导航栏。以下对我来说根本不起作用 %
height: calc(100% - 68px);
There's was no change. The page just stayed the same. However, when swapping this to "vh" instead it works great! The div block you assign it too will stay on the viewer's device hight only. Until they decide to scroll down the page.
没有任何变化。页面保持不变。但是，当将其替换为“vh”时，效果很好！您分配的 div 块也将仅保留在查看器的设备高度上。直到他们决定向下滚动页面。
height: calc(100vh - 68px);
Change the +/- to include how big your header is on the top. If your navbar is say 120px in height then change 68px to 120px.
更改 +/- 以包括顶部标题的大小。如果您的导航栏高度为 120 像素，则将 68 像素更改为 120 像素。
Hope this helps anyone who cannot get this working with using normal height: calc();
希望这可以帮助任何无法使用正常高度进行此操作的人： calc();
回答by Manas
All the parent elements in the hierarchy should have height 100%. Just give max-height:100% to the element and max-height:calc(100% - 90px) to the immediate parent element.
层次结构中的所有父元素都应具有 100% 的高度。只需将 max-height:100% 赋予元素并将 max-height:calc(100% - 90px) 赋予直接的父元素。
It worked for me on IE also.
它在 IE 上也对我有用。
html,
body {
height: 100%
}
parent-element {
max-height: calc(100% - 90px);
}
element {
height:100%;
}
The Rendering in IE fails due to failure of Calc when the window is resized or data loaded in DOM. But this method mentioned above worked for me even in IE.
调整窗口大小或在 DOM 中加载数据时，由于 Calc 失败，IE 中的渲染失败。但是上面提到的这种方法即使在 IE 中也对我有用。
回答by Davor Mlinaric
try setting both htmland bodyto height 100%;
尝试将html和都设置body为高度 100%；
html, body {background: blue; height:100%;}
回答by msw
You don't need to calculate anything, and probably shouldn't:
您不需要计算任何东西，并且可能不应该：
<!DOCTYPE html>
<head>
<style type="text/css">
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-color:green; padding-bottom: 100%}
</style>
</head>
<body>
<header>Some nav stuff here</header>
<h1>This is the heading</h1>
<div class="theCalcDiv">This blocks needs to have a CSS calc() height of 100% - the height of the other elements.
</div>
I stuck it all together for brevity.
为简洁起见，我把它们都粘在一起了。
回答by cellepo
If you are styling calc in a GWT project, its parser might not parse calc for you as it did not for me... the solutionis to wrap it in a css literallike this:
如果您在 GWT 项目中设置 calc样式，它的解析器可能不会为您解析 calc，因为它不适合我......解决方案是将它包装在一个 css 文字中，如下所示：
height: literal("-moz-calc(100% - (20px + 30px))");
height: literal("-webkit-calc(100% - (20px + 30px))");
height: literal("calc(100% - (20px + 30px))");
