64

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.

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.

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.

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.

4

7 回答 7

81

您需要确保将 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+

于 2013-04-23T08:56:41.383 回答
31

首先 - 使用 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);
}

看起来一样吧？

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

希望这可以帮助某人。

于 2015-11-13T13:56:21.423 回答
30

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

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

height: calc(100% - 68px);

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

height: calc(100vh - 68px);

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

希望这可以帮助任何无法使用正常高度进行此工作的人： calc();

于 2018-05-29T14:23:25.333 回答
3

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

html, body {background: blue; height:100%;}
于 2013-04-23T08:49:21.997 回答
2

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

于 2016-02-11T12:31:24.323 回答
0

您不需要计算任何东西，并且可能不应该：

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

为了简洁起见，我把它们粘在一起。

于 2013-04-23T09:23:12.133 回答
0

如果您在 GWT 项目中设置 calc样式，它的解析器可能不会为您解析 calc，因为它没有为我解析……解决方案是将其包装在这样的 css 文字中：

height: literal("-moz-calc(100% - (20px + 30px))");
height: literal("-webkit-calc(100% - (20px + 30px))");
height: literal("calc(100% - (20px + 30px))");
于 2015-12-29T08:58:47.417 回答