將表格單元格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