将表格单元格DIV高度的父代的高度设置为100％

Question

我有一个div集合作为表格，并将子div集合设置为表格单元格。我需要表格单元格（在这种情况下，#tv）为父级（#news）的100％。我的.news-inner div会根据包含的内容交替显示高度（可能是6 li，可能是20）。我不确定缺少的是什么，而且我确信早上四点到四点我已经忽略了这件事情非常容易。

我更喜欢一个不涉及JavaScript的解决方案，如本问题中提供的答案之一How to make a div inside a table cell "height: 100%"。 CSS者优先，但我不是独裁者

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> 

最后，

* { 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; } 

Answer 1

我已经添加到display:table#news，并从#tv我删除float:right;display:block并添加display:inline-block。

还要注意HTML注释，消除了空白。

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