CSS3 height：calc（100％）不工作 [英] CSS3 height: calc(100%) not working

问题描述

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

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

div元素保持内容的高度 - 看起来不像

$ b

HTML ：

 < header>一些nav stuff在这里< / header> 
< h1>这是标题< / h1> 
< div id =theCalcDiv>此块需要有一个CSS calc（）height 100％ - 其他元素的高度。< / 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} 
  

请参阅fiddle： http://jsfiddle.net/ElizabethMeyer/UF3mb/ 。

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

解决方案

您需要确保html和body设置为100％，并确保为calc添加供应商前缀，

 <$ c 
 $ b  
 c> 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 
} 
  

我还将您的边距/填充设置为0

这是一个更新的小提琴

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

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

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.

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}

See fiddle: http://jsfiddle.net/ElizabethMeyer/UF3mb/.

I would appreciate any help or pointers in the right direction.

解决方案

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.

Following CSS works:

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.

Here's an updated fiddle

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

Browser support is: IE9+, Firefox 16+ and with vendor prefix Firefox 4+, Chrome 19+, Safari 6+

这篇关于CSS3 height：calc（100％）不工作的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！