Css相对响应高度[重复]

【问题标题】：Css relative responsive height [duplicate]Css相对响应高度[重复]
【发布时间】：2020-12-02 15:26:48
【问题描述】：

#parent {
  position: fixed;
  width: 600px;
  height: 300px;
  background: red;
}

#child {
  position: relative;
  width: 200px;
  margin-bottom: 10px;
  margin-top: 10px;
  height: auto;
  background: blue;
}

<div id="parent">
  <div id="child"></div>
</div>

我想让孩子拥有父母的身高减去边距。为什么高度是0px？

JSFiddle

【问题讨论】：

display:flex to parent?

标签： html css

【解决方案1】：

height: auto 只是“自动与它所包含的内容一样大”。如果你想明确地让它的高度减去边距，你可以设置height: calc(100% - 20px);：

#parent {
  position: fixed;
  width: 600px;
  height: 300px;
  background: red;
}

#child {
  position: relative;
  width: 200px;
  margin-bottom: 10px;
  margin-top: 10px;
  height: calc(100% - 20px);
  background: blue;
}

<div id="parent">
  <div id="child"></div>
</div>

【讨论】：