高度：calc（100％）在CSS中无法正常工作

小编典典

高度：calc（100％）在CSS中无法正常工作

css

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

我将不胜感激任何帮助或朝着正确方向的指点。

阅读 1174

2020-05-16

共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，否则将添加滚动条。

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

2020-05-16