【问题标题】: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>

【讨论】:

    猜你喜欢
    • 1970-01-01
    • 2017-07-13
    • 2013-05-08
    • 2021-10-14
    • 2016-08-20
    • 1970-01-01
    • 2014-01-02
    • 2016-03-03
    • 2019-08-14
    相关资源
    最近更新 更多