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

  • Z时代
  • 2024-01-10
  • 分类：问答

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

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

回答：

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

以上是 高度：calc（100％）在CSS中无法正常工作 的全部内容， 来源链接： utcz.com/qa/432022.html

回到顶部