Have Table-cell DIV height 100% of parent

Question

I have a div set as a table, and a child-div set as a table-cell. I need the table-cell (in this case, #tv) to be 100% of the parent (#news). My .news-inner div will be alternating in height based on what content is included (Could be 6 li, could be 20). I'm not sure what is missing, and I'm sure it's something incredibly easy that I've overlooked at quarter to four in the morning.

I'd prefer a solution that didn't involve JavaScript like one of the answers provided in this question, How to make a div inside a table cell "height: 100%". CSS prefered, but I'm no dictator

JSFiddle

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

And finally,

* { box-sizing: border-box; }
#news { width: 800px; background: #ccc; }
#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%; display: block;  background: #c6c; float: right; }

Vucko · Accepted Answer · 2015-02-11T09:20:56.343

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>

JSFiddle

Fiddle with 20 li elements

Have Table-cell DIV height 100% of parent

1 Answers1