Div Height:100%; Not Working with Display:Table-Cell;

height: 100% for div inside div with display: table-cell

When you use % for setting heights or widths, always set the widths/heights of parent elements as well:

.table {    display: table;    height: 100%;}
.cell {    border: 2px solid black;    vertical-align: top;    display: table-cell;    height: 100%;}
.container {    height: 100%;    border: 2px solid green;    -moz-box-sizing: border-box;}

<div class="table">    <div class="cell">        <p>Text        <p>Text        <p>Text        <p>Text        <p>Text        <p>Text        <p>Text        <p>Text    </div>    <div class="cell">        <div class="container">Text</div>    </div></div>

div height:100%; not working with display:table-cell;

Your code should work now.

<html>
<body style="position:fixed; top:0px; left:0px;bottom:0px; right:0px;  margin:0px;">
    <div style='display : table; width : 100%; height : 100%'>
    <div style='display : table-row;'>
        <div style="border:solid; display : table-cell;">
        </div>
    </div>
    </div>
</body>
</html>

Example

Rule of thumb : Always have a proper markup whenever display : table-cell is concerned.

Make div height 100% in a table cell

If you only need the background color to cover the entire cell, you can just set it on the td rather than div.

td:last-child {
  background-color: green;
}

If you really need to make the div to cover the cell, you can try using the position tricks. Note, this approach only works when there is less data in the second cell.

td {
  position: relative;
}
td:last-child div {
  background-color: green;
  width:100%;
  height: 100%;
  position: absolute;
  left: 0;
  top: 0;
}

jsFiddle

100% height on child of display: table-cell

One solution is give 100% height to .price-list, .price-list > li and .price-wrapper will make child height fit to content.

.price-list {
    display: table;
    height: 100%; //Here
    list-style: outside none none;
    margin: 0;
    padding: 0;
    table-layout: fixed;
    width: 100%;
}

.price-list > li {
  display: table-cell;
  padding: 0 10px;
  height:100%; //Here
}

.price-wrapper {
    background-color: #fff;
    height: 100%; //Here
    list-style: outside none none;
    margin: 0;
    padding: 0;
}

Working Fiddle

CSS display:table-cell, set height and overflow:hidden, doesn't work?

To make it work, we have to use position:relative for table and position:absolute for table cell item. Also in your code, I've removed container's height: 100% which is of no use. Here's the preview and fiddle.

.table{    display: table;    table-layout: fixed;    width: 100%;    height:200px;    position: relative;}.cell{      display: table-cell;      vertical-align: top;      position: absolute;      height:200px;      width: 100%;      overflow-y:scroll;      overflow-x: hidden;}.container{  background-color:red;}.container img{  display:block;}

<div class="table">    <div class="cell">        <div class="container">           <img src="http://img5.imgtn.bdimg.com/it/u=172690696,3532821463&fm=206&gp=0.jpg" />           <img src="http://img5.imgtn.bdimg.com/it/u=172690696,3532821463&fm=206&gp=0.jpg" />            <img src="http://img5.imgtn.bdimg.com/it/u=172690696,3532821463&fm=206&gp=0.jpg" />        </div>    </div>

100% height div inside table-cell not working on Firefox

The trick is:

Set row's height to 100%
Set cell's height to 0

html,body {  height: 100%;  margin: 0;  padding: 0;}#table {  width: 100%;  display: table;  height: 100%;}#row {  display: table-row;  height: 100%;}#cell_1,#cell_2 {  display: table-cell;  height: 0;}#cell_1 {  width: 390px;  background: aliceblue;}#cell_2 {  background: yellow;}#overflown_div {  height: 100%;  overflow-y: scroll;  padding: 10px;  box-sizing: border-box;}#overflown_div p {  height: 80px;}

<div id="table">  <div id="row">    <div id="cell_1">      <div id="overflown_div">        <p>Blah blah blah</p>        <p>Blah blah blah</p>        <p>Blah blah blah</p>        <p>Blah blah blah</p>        <p>Blah blah blah</p>        <p>Blah blah blah</p>        <p>Blah blah blah</p>        <p>Blah blah blah</p>        <p>Blah blah blah</p>        <p>Blah blah blah</p>      </div>    </div>    <div id="cell_2">      Blah blah blah    </div>  </div></div>

height:100% inside table-cell not working on Firefox and IE

For height:100% to work, all parent containers must be height:100%. If you notice, your .table-cell styles do not have height:100%.

Adding this style fixes the issue in Firefox:

.table-cell {
    display:table-cell;
    vertical-align: middle;
    width:100%;
    height:100%;
}

As an alternative, adding the image to your HTML rather than as a CSS background-image might also work.

body, html {    margin:0;    padding:0;    height:100%;}.table {    display:table;    width:100%;    height:100%;}.table-cell {    display:table-cell;    vertical-align: middle;    width:100%;}.content {    height: 100%;    display: block;    overflow: hidden;    position: relative;    background-size:cover;}
.content img {    width:100%;    height:100%;}

<div class="table">    <div class="table-cell">        <div class="content">            <img src="http://spaceinimages.esa.int/var/esa/storage/images/esa_multimedia/images/2012/11/solar_eclipse_corona/12092636-3-eng-GB/Solar_eclipse_corona_node_full_image.jpg"/>        </div>    </div></div>

Why is width: 100% not working on div {display: table-cell}?

Putting display:table; inside .outer-wrapper seemed to work...

JSFiddle Link

EDIT: Two Wrappers Using Display Table Cell

I would comment on your answer but i have too little rep :( anyways...

Going off your answer, seems like all you need to do is add display:table; inside .outer-wrapper (Dejavu?), and you can get rid of table-wrapper whole-heartedly.

JSFiddle

But yeah, the position:absolute lets you place the div over the img, I read too quickly and thought that you couldn't use position:absolute at all, but seems like you figured it out already. Props!

I'm not going to post the source code, after all its 99% timshutes's work, so please refer to his answer, or just use my jsfiddle link

Update: One Wrapper Using Flexbox

It's been a while, and all the cool kids are using flexbox:

<div style="display: flex; flex-direction: column; justify-content: center; align-items: center;">
    stuff to be centered
</div>

Full JSFiddle Solution

Browser Support (source): IE 11+, FireFox 42+, Chrome 46+, Safari 8+, iOS 8.4+ (-webkit- prefix), Android 4.1+ (-webkit- prefix)

CSS Tricks: a Guide to Flexbox

How to Center in CSS: input how you want your content to be centered, and it outputs how to do it in html and css. The future is here!