Question

我有一个div，我想填充整个身体的高度减去一个像素的设定数字。但我不能得到高度：calc（100％ - 50px）才能工作。

（我想这样做的原因是我的元素具有基于一些不同标准的动态高度，例如标题的高度根据它可以包含的不同元素而变化。然后内容div需要拉伸以填充其余元素可用空间。）

然而，div元素保持内容的高度 - 它似乎不会将100％解释为body元素的高度。

HTML ：

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

CSS ：

body {background: blue; height:100%;position:relative;}
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 + 20px)); display:block}

请参阅小提琴：http://jsfiddle.net/ElizabethMeyer/UF3mb/。

我会感谢任何正确方向的帮助或指示。

Answer 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上将你的margin / padding设置为0，否则在添加它时会有一个滚动条。

这是一个更新的小提琴

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

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

Answer 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);
}

看起来一样吗？

注意空格!!! 检查Android浏览器，Firefox for Android，Chrome for Android，Chrome和Firefox for Windows和Internet Explorer 11.如果没有空格，他们都会忽略CSS。

希望这有助于某人。

Answer 3

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

示例：您希望在滚动之前仅向用户显示顶部div，例如英雄横幅模块。但是，页面顶部是一个高度为68px的导航栏。以下对我来说根本不起作用

height: calc(100% - 68px);

没有变化。该页面保持不变。但是，当把它换成＆＃34; vh＆＃34;相反，它很棒！您指定的div块也将仅保留在查看器的设备上。直到他们决定向下滚动页面。

height: calc(100vh - 68px);

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

希望这可以帮助任何无法使用正常高度的人：calc（）;

Answer 4

尝试将html和body设置为高度100％;

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

Answer 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中也适用于我。

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

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

Answer 7

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

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

CSS3高度：计算（100％）不起作用

7 个答案: