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

问题在于class为“div2”的div溢出了父容器的底部。它应该填充容器中剩余的任何空间（标题没有占用的空间），并且应该有一个滚动条来查看其余的内容。

我希望它看起来像下面的示例，除了它应该垂直填充它的容器，并且不应该在class为“div2”的div上使用硬编码百分比。

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

它应该看起来类似于上面的内容，但是除了带有滚动条的div（div2）之外，不应该有任何红色空间。它应该自动填充父容器而不会溢出。

所以，我的问题是，是否可能使子div具有像JSFiddle示例10中那样的滚动条，同时使其填充父级而不会溢出，并且不使用硬编码的％高度。

我不想使用硬编码的％高度，因为它应该能够始终填充父容器，而不管屏幕大小如何，父容器使用vh作为其高度。

- RegretfulWasher

---

了解CSS Flexbox - Stephan Bijzitter

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/

- pulamc

---

太好了，这正是我在寻找的。谢谢！ - RegretfulWasher

Answer 2

我使用了一点javascript从DOM中提取包含div的高度，并将其应用于.div2类。此外，我没有在div1上使用％高度，而是使用其当前像素高度，即75px。

基本上，从包含div的总高度中减去75px（或您在表格上方得到的任何高度），并将其作为.css高度放入.div2中。

使用这种方法，每次页面加载时都会计算高度，因此它应该始终适合元素而不是硬编码。

::Fiddle:: 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:: --> 只做了这一个调整

<div class="div1" style="height:75px;width:100%;">

- Eolis

---

这个方法是有效的，但我本来想避免使用 JavaScript 来解决这个问题，因为我知道只用 CSS 和 HTML 也应该可以实现。 - RegretfulWasher