height: calc(100%) 在 CSS 中无法正常工作答案

【问题标题】：height: calc(100%) not working correctly in CSSheight: calc(100%) 在 CSS 中无法正常工作
【发布时间】：2020-04-23 14:36:46
【问题描述】：

我有一个 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>

如果有任何帮助或正确方向的指示，我将不胜感激。

【问题讨论】：

请注意，calc 不支持 all 浏览器，例如 safari 和默认的 android 浏览器。
@Aquillo -webkit-calc() 支持最新版本的 Safari 和 iOS 上的 Safari
我刚刚注意到 Safari 6 的变化，你说得对，大卫。
确保设置了父元素的高度。
还要确保操作符的两边都有一个空格。空间+空间空间空间

标签： css

【解决方案1】：

您需要确保将 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 上将你的边距/填充设置为 0，否则添加时会有一个滚动条。

这是一个更新的小提琴

http://jsfiddle.net/UF3mb/10/

浏览器支持是： IE9+、Firefox 16+ 和供应商前缀 Firefox 4+、Chrome 19+、Safari 6+

【讨论】：

我在找这个，谢谢！需要-moz-calc 和-webkit-calc！
实际上并不要求将 html 和 body 设置为 100% 高度。只是如果你想要 100% 的高度，如果包含的元素没有你想要的那么高，它只会是包含元素的 100% 的高度。如果你唯一包含的元素是body和html，那么使用calc没有意义，只需使用height: 100%

【解决方案2】：

首先 - 使用 Firebug（或您的偏好）检查浏览器是否正在解释 css 属性。有时使用的工具会立即给您带来问题，所以不要再寻找了。

第二次 - 检查兼容性：http://caniuse.com/#feat=calc

第三个 - 几个小时前我遇到了一些问题，刚刚解决了。这是最小的事情，但它让我忙了 30 分钟。

这是我的 CSS 的样子

#someElement {
    height:calc(100%-100px);
    height:-moz-calc(100%-100px);
    height:-webkit-calc(100%-100px);
}

看起来不错不是吗？错误的它应该是这样的：

#someElement {
    height:calc(100% - 100px);
    height:-moz-calc(100% - 100px);
    height:-webkit-calc(100% - 100px);
}

看起来一样吧？

注意空格！！！ 检查了安卓浏览器、安卓版Firefox、安卓版Chrome、Windows版Chrome和Firefox以及Internet Explorer 11。如果没有空格，它们都忽略了CSS。

希望这对某人有所帮助。

【讨论】：

是的，注意空格！！！我花了几个小时试图让它在 Chrome 中工作，只是为了找出空格问题。

【解决方案3】：

我正在寻找为什么 % 似乎不起作用。因此，我使用 100vh 进行了测试，而不仅仅是将其设置为 100%，似乎 100vh 在几乎所有浏览器/设备上都非常有效。

示例：您只想在顶部 div 滚动之前向用户显示它，就像英雄横幅模块一样。但是，页面顶部是一个高度为 68 像素的导航栏。以下对我来说根本不起作用 %

height: calc(100% - 68px);

没有任何变化。页面保持不变。但是，当将其交换为“vh”时，效果很好！您分配的 div 块也将仅保留在查看器的设备高度上。直到他们决定向下滚动页面。

height: calc(100vh - 68px);

更改 +/- 以包含顶部的标题大小。如果您的导航栏高度为 120 像素，则将 68 像素更改为 120 像素。

希望这可以帮助任何无法使用正常 height: calc();

【讨论】：

+1 非常感谢。我无法让它在 Firefox 中运行，只能在 Chrome 和 Edge 中运行。这一切都很好。
谢谢，我正在尝试做某事，这是唯一能起到魅力的作用！！！
这在 Chrome 和 Firefox 上运行良好......像 -moz-calc 这样的旧功能不再工作

【解决方案4】：

尝试将html 和body 都设置为高度100%；

html, body {background: blue; height:100%;}

【讨论】：

【解决方案5】：

层次结构中的所有父元素的高度都应为 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 中也对我有用。

【讨论】：

【解决方案6】：

你不需要计算任何东西，可能也不应该：

<!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>

为了简洁起见，我将它们全部放在一起。

【讨论】：

我确实需要 calc() - 显然这个例子只是一个虚拟的，而不是我遇到这个问题的更复杂的项目。可能引起混淆的原因是我也有一个粘性页脚，并且需要内容 div 在页眉和页脚之间伸展，而与查看网站的设备无关。

【解决方案7】：

如果您在 GWT 项目中设置 calc 样式，它的解析器可能不会为您解析 calc，因为它不适合我...solution 是 将其包装在css 文字 像这样：

height: literal("-moz-calc(100% - (20px + 30px))");
height: literal("-webkit-calc(100% - (20px + 30px))");
height: literal("calc(100% - (20px + 30px))");

【讨论】：