min-height:300px 的父母的孩子没有继承父母的身高答案

【问题标题】：Child of parent with min-height:300px is not inheriting parent's heightmin-height:300px 的父母的孩子没有继承父母的身高
【发布时间】：2020-09-11 10:53:26
【问题描述】：

我有如下所示的 div 块：

<div className={'row ge-container'}>
   <div className={'a-span3 ge-container-navigation'}>
      hello
   </div>
   <div className={'a-span9 ge-container-content'}>
      Okay    
   </div>
</div>

css 为

.ge-container {
  min-height: 300px;
}
.ge-container-navigation {
  background-color: $light-gray-background;
  display: inline-block;
  float: left;
  height: inherit;
  margin: 5px 0 0 0;
  padding: 10px 8px 0 8px;
  border: 1px solid $gray;
}
.ge-container-content {
  display: inline-block;
  height: inherit;
}

孩子没有继承父母的身高。我通过查看一些答案来设置孩子的最小高度来继承来尝试解决方案。但是，当高度超过 300 像素时会失败。

谁能帮忙解决这个问题

【问题讨论】：

继承考虑相同的属性，你不能继承高度内的最小高度（或相反）
@TemaniAfif 我只想继承身高。这只是一个解决方案，不是继承高度，而是通过设置 min-height 继承 minHeight：在子 css 中继承。但是当父母的高度超过 300 像素时，这会失败。
使父显示：flex
你能创建一个 sn-p 或一个 JSFiddle 吗？
是否有人忘记清除浮动？

标签： css

【解决方案1】：

请在.ge-container 父级中使用display: flex; CSS。

此代码仅使用 CSS 使高度为 100% 的子 flex-box。

.ge-container {
  min-height: 300px;
      display: flex;
}

更新了 sn-p :-

 .ge-container {
  min-height: 300px;
      display: flex;
}
.ge-container-navigation {
  background-color:red;
  display: inline-block;
  float: left;
  height: inherit;
  margin: 5px 0 0 0;
  padding: 10px 8px 0 8px;
  border: 1px solid $gray;
}
.ge-container-content {
  display: inline-block;
  height: inherit;
}

<div class="row ge-container">
   <div class="a-span3 ge-container-navigation">
      hello
   </div>
   <div className="a-span9 ge-container-content">
      Okay    
   </div>
</div>

【讨论】：

【解决方案2】：

你也可以用javascript/jquery试试

$('.ge-container-navigation').height($('.ge-container'));

并且，如果您希望它在旋转模式下自行更新：

setInterval(function(){
  $('.ge-container-navigation').height($('.ge-container'));
}, 10);

谢谢

【讨论】：