Height: 100% for <Div> Inside <Div> 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>

Make a DIV fill an entire table cell

The following code works on IE 8, IE 8's IE 7 compatibility mode, and Chrome (not tested elsewhere):

<table style="width:100px"> <!-- Not actually necessary; just makes the example text shorter -->
   <tr><td>test</td><td>test</td></tr>
   <tr>
      <td style="padding:0;">
         <div style="height:100%; width:100%; background-color:#abc; position:relative;">
            <img style="left:90px; position:absolute;" src="../Content/Images/attachment.png"/>
            test of really long content that causes the height of the cell to increase dynamically
         </div>
      </td>
      <td>test</td>
   </tr>
</table>

You said in your original question that setting width and height to 100% didn't work, though, which makes me suspect that there is some other rule overriding it. Did you check the computed style in Chrome or Firebug to see if the width/height rules were really being applied?

Edit

How foolish I am! The div was sizing to the text, not to the td. You can fix this on Chrome by making the div display:inline-block, but it doesn't work on IE. That's proving trickier...

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

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.

Making inner div heights 100% with css in a table-cell

It's very simple. In your case this is all you need:

dl.tags-rows {
    display: table;
    height: 1px; /* IE fix, any small height */
}

.alert {
    display: inline-table;
    height: 100%;
    width: 100%;
    vertical-align: top;
}

Demo: http://jsfiddle.net/a1opo1kd/5/

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

How to make a div inside a table cell height: 100%

There is another option, but whether or not it is a good fit for your project depends on which browsers you want to support.

http://caniuse.com/#search=flexbox

I've simplified your markup a bit and completely removed the table.

<div id="pictures">
    <article class="entry picture">
        <div class="entry picture">
            <img class="picture" src="./images/150x150.jpg" width="150" height="150"></img>
        </div>
        <div class="entry picture infobox">
            <a href="#" class="entry">
                <h3 class="entry picture headline">contents_0 alpha headline</h3>
                <div class="view picture">
                    <span class="comments_amount">5</span>
                    <span class="articlenk info">Bild zeigen</span>
                </div>
            </a>
        </div>
    </article>

    <article class="entry picture"><div class="picture wrapper">
        <div class="entry picture">
            <img class="picture" src="./images/150x71.jpg" width="150" height="71"></img>
        </div>
        <div class="entry picture infobox">
            <a href="#" class="entry">
                <h3 class="entry picture headline">contents_0 beta headline</h3>
                <div class="view picture">
                    <span class="comments_amount">5</span>
                    <span class="pictures info">Bild zeigen</span>
                </div>
            </a>
        </div></div>
    </article>
</table>

The CSS for this is very simple, but I've left off the prefixes:

div#pictures {
    display: flex;
    flex-flow: row wrap;
}

article {
    flex: 1 1 50%;
    box-sizing: border-box; /* optional */
    position: relative;
}

div.infobox {
    position: absolute;
    bottom: 0;
}

http://jsfiddle.net/NDMTH/1/

Figure/figcaption would probably be a more appropriate choice here than article.

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>

Have Table-cell DIV height 100% of parent

I've added display:table to #news, and from #tv I removed float:right;display:block and added display:inline-block.

Also notice the HTML comments that removes the whitespace.

* { box-sizing: border-box; }#news { width: 800px; background: #ccc; display:table }#news .news-inner {width: 75%; display: inline-block; }#news ul { list-style: none; width: 100%; padding: 15px; font-size: 0;  }#news ul li { font-size: 14px; display: inline-block; width: 50%; height: 150px; vertical-align: top }#news ul li:nth-child(1) { background: #c6c; }#news ul li:nth-child(2) { background: #000; }#tv { width: 25%; height: 100%; background: #c6c; display: inline-block; vertical-align:top; }

<div class="box" id="news">    <div class="news-inner">        <ul>            <li>1</li>            <li>2</li>            <li>3</li>            <li>4</li>            <li>5</li>            <li>6</li>        </ul>    </div><!--    --><div id="tv">        test    </div></div>

Height: 100% for <Div> Inside <Div> with Display: Table-Cell