Question

我有一个行为不端div，不想继承其父高。 100%的{0}高度为

<div>
  <div style="border: 1px red solid; display: table-cell; width: 20px;">
    <div style="height: 100%; border: 1px green solid;"></div>
  </div>
  <div style="border: 1px blue solid; display: table-cell;">a</div>
</div>

小提琴：https://jsfiddle.net/muzq7g7b/1/

它的父母得到了它的兄弟姐妹（字母a）身高，这很好。但是为什么孩子不接受它对我来说是一个谜。

Answer 1

在Chrome中，您需要将height: 100%;添加到父表格单元格

<div>
  <div style="border: 1px red solid; display: table-cell; height: 100%; width: 20px;">
    <div style="height: 100%; border: 1px green solid;"></div>
  </div>
  <div style="border: 1px blue solid; display: table-cell;">a</div>
</div>

在Firefox中，您需要添加父table-row并向其添加height: 100%;

<div style="display:table-row; height: 100%;">
  <div style="border: 1px red solid; display: table-cell; height: 100%; width: 20px;">
    <div style="height: 100%; border: 1px green solid;"></div>
  </div>
  <div style="border: 1px blue solid; display: table-cell;">a</div>
</div>

在Internet Explorer中，您需要复制一个完整的表并向每个父级添加height: 100%。

<div style="display: table; height: 100%">
  <div style="display:table-row; height: 100%;">
    <div style="border: 1px red solid; display: table-cell; height: 100%; width: 20px;">
      <div style="height: 100%; border: 1px green solid;"></div>
    </div>
    <div style="border: 1px blue solid; display: table-cell;">a</div>
  </div>
</div>

父元素高度未继承

1 个答案: