with height in percentage has 0 height when inside table-cell in FF and IE

Question

I want two vertically stacked empty divs (to display background images) to share exactly 50% of the height of the parent container minus a fixed gap (e.g. 20px). I'm using calc() for this - as Opera Mini doesn't matter in my case.

I got this working fine on all browsers:

html,
body {
  height: 100%;
  width: 100%:
}
#parent {
  width: 100%;
  height: 100%;
  max-height: 600px;
  max-width: 400px;
}
#top {
  height: calc(50% - 10px);
  width: 100%;
  background: green;
}
#bottom {
  height: calc(50% - 10px);
  width: 100%;
  background: yellow;
  margin-top: 20px;
}

<div id="parent">
  <div id="top"></div>
  <div id="bottom"></div>
</div>

See JSFiddle: http://jsfiddle.net/Miglosh/bvndkw5y/

But, as a next step, I want to put this container next to another container holding a third image roughly double the size. For this, I use a parent container with display:table and two divs with display:table-cell.

#contact-pics {
  display: table;
  width: 100%;
  height: 100%;
}
.img-responsive {
  width: 100%;
}
.table_cell {
  display: table-cell;
  vertical-align: top;
}
.table_cell:first-child {
  width: 66.666666%;
  padding-right: 14px;
}
.table_cell:nth-child(2) {
  width: 33.333333%;
  padding-left: 14px;
}
#parent {
  width: 100%;
  height: 100%;
}
#top {
  height: calc(50% - 10px);
  width: 100%;
  background: green;
}
#bottom {
  height: calc(50% - 10px);
  width: 100%;
  background: yellow;
  margin-top: 20px;
}

<section id="contact-pics">
  <div class="table_cell">
    <img class="img-responsive" src="http://placehold.it/1650x1022" />
  </div>
  <div class="table_cell small">
    <div id="parent">
      <div id="top"></div>
      <div id="bottom"></div>
    </div>
  </div>
</section>

WORKS PERFECTLY FINE on iOS, Android Browser, Safari, Chrome....

But in FF and IE, the two smaller divs collapse and don't get displayed so you can't see the background.

Here's the JSFiddle: http://jsfiddle.net/Miglosh/bp251n71/

What's the clue? I lost a whole day yesterday with this and still don't find the solution.

Thanks for your help, Stefan.

score 1 · Accepted Answer · edited May 23 '17 at 11:59

1

Unfortunately, there is no solution. Obviously, the behavior of height with table-cells is not part of the spec.

Just found this thread: IE display: table-cell child ignores height: 100%

Nothing to be done. Good old JS to the help!

edited May 23 '17 at 11:59

Community

1
1

answered May 22 '15 at 09:12

Miglosh

157
2
7

score 0 · Answer 2 · answered May 19 '15 at 09:08

0

I suggest to use display: flex; instead of display:table will solve your issue.

#parent {
    height: 100px;
    width: 100%;
}

#contact-pics {
    display: flex;
    width: 100%;
    height: 100%;
}

Check Updated Fiddle

answered May 19 '15 at 09:08

ketan

19,129
42
60
98

Thanks for your reply ketan. Works 80% on FF (the bottom of the large image and the bottom of the lower small image aren't aligned). BUT, unfortunately doesn't work any more on Chrome, Safari and the rest... – Miglosh May 19 '15 at 09:27
You're a genius ;-) Works perfectly well now in FF. BUT the notorious IE still refuses to cooperate :-( – Miglosh May 19 '15 at 10:37
It is because it's parent required height and width for IE. Currently in fiddle set in % which will not work if you set html 100% then it will display (But weird.) Check http://jsfiddle.net/bp251n71/11/ – ketan May 19 '15 at 10:55
Yes, that's really weird and annoying. But how could I solve this problem? – Miglosh May 19 '15 at 14:52

with height in percentage has 0 height when inside table-cell in FF and IE

2 Answers2