CODEWITHSUNDEEP
htmlcssheightzero
Miglosh
Miglosh

Reputation: 167

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

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.

Upvotes: 0

Views: 103

Answers (2)

Miglosh
Miglosh

Reputation: 167

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!

Upvotes: 1

ketan
ketan

Reputation: 19341

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

Upvotes: 0

Related Questions