html - div的css高度不从容器继承

Question

这是一个容器 div，里面有两个 float div 和一个常规 div:

<div style="width: 110%; min-height:250px;overflow:hidden; border: 4px solid red">

  <!-- divI -->
  <div style="float:right; padding:25px; width:35%; border: 6px  gray; border-style: hidden hidden hidden double ">
    ....stuff
  </div>

  <!-- divII -->
  <div style="float:right; padding: 25px; width:35%;  border-left: 6px gray; border-style: hidden hidden hidden double; height:100% ">
    ....stuff
  </div>

  <div>
    .... stuff
  </div>
</div>

两个 float 的 div 左侧都有灰色边框，用于分隔列。

除灰色边框外，一切都正确呈现。 DivII 比 DivI 短。容器div的红色边框与div I的边框底部匹配，但divII的边框没有继承容器的高度，太短了。

我知道 float div 会导致此类问题，但我不知道如何解决。

Answer 1

问题是您在父项上指定了 min-height，但期望子项继承 height。您应该在父级上使用 height 或在子级上使用 min-height: inherit。

还必须说你真的don't want to use inline styling ，主要是由于其 high specificity (只有内联 !important 胜过它)和跨 DOM 元素的必要重复。

1. 对 child 使用 min-height: inherit:

.parent {
  width: 110%;
  min-height: 250px;
  overflow: hidden;
  border: 4px solid red;
}

.child {
  float: right;
  padding: 25px;
  width: 35%;
  border-left: 6px gray;
  border-style: hidden hidden hidden double;
  min-height: inherit; /* <-- use min-height here */
  height: 100%;
}

<div class="parent">

  <div class="child">....stuff</div>

  <div class="child">....stuff</div>

  <div>.... stuff</div>
</div>

1. 在父级上使用高度:

.parent {
  width: 110%;
  min-height: 250px;
  height: 250px; /* <-- use height here */
  overflow: hidden;
  border: 4px solid red;
}

.child {
  float: right;
  padding: 25px;
  width: 35%;
  border-left: 6px gray;
  border-style: hidden hidden hidden double;
  height: 100%;
}

<div class="parent">

  <div class="child">....stuff</div>

  <div class="child">....stuff</div>

  <div>.... stuff</div>
</div>