CODEWITHSUNDEEP
htmlcssheight
Oleg Mikheev
Oleg Mikheev

Reputation: 17444

Parent element height not inherited

I've got a misbehaving div that doesn't want to inherit its parent height. The one with 100% has 0 height:

<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>

Fiddle: https://jsfiddle.net/muzq7g7b/1/

Its parent gets its sibling's (the one with letter a) height, that's good. But why the child doesn't receive it is a mystery to me.

Upvotes: 1

Views: 298

Answers (1)

Michael Coker
Michael Coker

Reputation: 53674

In Chrome, you need to add height: 100%; to the parent table cell

<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>

In Firefox, you need to add a parent table-row and add height: 100%; to it

<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>

And in internet explorer, you need to replicate a full table and add height: 100% to each parent.

<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>

Upvotes: 2

Related Questions