У таблицы DIV высота таблицы 100% от родителя

Question

У меня есть набор div как таблица, а дочерний-div - как таблица-ячейка. Мне нужна таблица-ячейка (в данном случае #tv), чтобы быть 100% от родителя (#news). Мой .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.

Также обратите внимание на комментарии , который удаляет пробел.

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