高度:calc(100％)在CSS中无法正常工作 [英] height: calc(100%) not working correctly in CSS

问题描述

我有一个div，它要填充整个身体高度，而不要填充以像素为单位的设定值.但是我无法使height: calc(100% - 50px)正常工作.

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需要扩展以填充剩余的可用空间.

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元素保持内容的高度-好像并不能将100％解释为body元素的高度.

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.

推荐答案

您需要确保将html和body设置为100％，并确保为calc添加供应商前缀，因此-moz-calc，-webkit-计算.

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.

以下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，否则添加滚动条.

I also set your margin/padding to 0 on html and body, otherwise there would be a scrollbar when this is added on.

这是更新的小提琴

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

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

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

这篇关于高度:calc(100％)在CSS中无法正常工作的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！