使div的垂直適合內父母的div，與一個滾動條

Question

我想有一個容器內的兩個div垂直適合填充父容器，沒有溢出從底部。

<div class="modal-body"> 
    <div class="parent-container"> 
    <div class="div1" style="height:auto;width:100%;"> 
     <span style="width:100%;"> 
     <div class="td-div">Header Test 1</div> 
     <div class="td-div">Header Test 12</div> 
     <div class="td-div">Header Test 1 3</div> 
     <div class="td-div">Header Test 14</div> 
     <div class="td-div">Header Test 15</div> 
     </span> 
    </div> 
    <div class="div2" style="width:100%;overflow-y:auto;"> 
     <div class="blue-row" style= "width:100%;"> 
      <span style="width:100%;display:inline-block"> 
      <div class="td-div">TEst1 testing seeing what happens when its long</div> 
      <div class="td-div">Test2</div> 
      <div class="td-div">Test 3 3</div> 
      <div class="td-div">Test 4</div> 
      <div class="td-div">T e s t 5</div> 
      </span> 
     </div> 
     <div class="blue-row" style="width:100%;"> 
      <span style="width:100%;display:inline-block"> 
      <div class="td-div">TEst1 testing seeing what happens when its long</div> 
      <div class="td-div">Test2</div> 
      <div class="td-div">Test 3 3</div> 
      <div class="td-div">Test 4</div> 
      <div class="td-div">T e s t 5</div> 
      </span> 
     </div> 
    </div> 
    </div> 
</div> 

下面的鏈接是我遇到的實際問題，使用更多的CSS來更容易區分。

http://jsfiddle.net/8sdLe2pu/12/

的問題是帶班「DIV2」的股利是滿溢出來父容器的底部。它應該填充容器中留下的任何空間（標題不佔用的空間），並且應該有一個滾動條才能查看其餘內容。

我希望它看起來像下面這個例子，除了它應該垂直填充它的容器，並且不應該在類div2上使用硬編碼的百分比。

http://jsfiddle.net/8sdLe2pu/10/

應該類似於此之上，除了應該有下面的div沒有紅色空間滾動條（DIV2）。它應該自動填充父容器而不會溢出。

所以，我的問題是，是否有可能讓子div有一個像JSFiddle示例10中的滾動條，同時讓它填充父項而不會溢出，並且不使用硬編碼％高度。

我不想使用硬編碼的％高度，因爲它應該始終能夠填充父容器，而不管屏幕大小，而父容器使用vh作爲高度。

Answer 1

這是我使用flexbox的解決方案。

*{ 
    box-sizing:border-box; 
} 
.modal-body{ 
    height:65vh; 
    background:red; 
} 
.parent-container{ 
    width:100%; height:100%; 
    display:flex; 
    align-items:stretch; 
    flex-direction:column; 
} 
.div1{ 
    background:green; 
} 
.div2{ 
    flex:1; 
    background:blue; 
} 
.div1 span{ 
    display:table; 
} 
.div1 span div{ 
    display:table-cell; 
    width:20%; 
    padding:1em; 
    vertical-align:middle; 
} 

div.blue-row span{ 
    display:table; 
    width:100%; 
} 
div.blue-row span div{ 
    display:table-cell; 
    width:20%; 
    padding:1em; 
    vertical-align:middle; 
} 

和工作演示可以在這裏找到http://jsfiddle.net/pulamc/x8xw2hLg/

Answer 2

我使用了一點javascript來將包含div的高度從DOM中拉出來，並將其應用於.div2類。而不是div1上的高度％我使用了當前像素高度75px。

基本上從內含div的總高度減去960x75像素（或任何高度你結束了爲表格上方的部分），並把在作爲對.div2

的CSS高度利用該方法的每次頁面加載時都會計算高度，所以它應該始終適合元素而不是硬編碼。

::小提琴:: https://jsfiddle.net/8sdLe2pu/38/

::代碼::

:: JS :: - >使用jQuery的

var $modalBody = $('.modal-body'), 
    modalHeight = $modalBody.height(), 
    $div2 = $('.div2'), 
    div2Height = $div2.css('height'); 

$div2.css({ 
    height: modalHeight - 75 
}); 

$(window).resize(function(){ 
    if (div2Height !== modalHeight - 75){ 
     $div2.css({ 
      height: modalHeight - 75 
     }); 
    } 
}); 

:: CSS ::

.modal-body { 
    height:65vh; 
    background: red; 
} 
.td-div { 
    width:19%; 
    display:inline-block; 
} 
.div2 { 
} 

:: HTML :: - >只做了這一個調整

​​