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”类的div溢出了父容器的底部。它应该填充容器中剩余的任何空间（标题不占用的空间），并且应该有一个滚动条以便能够查看其余的内容。

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

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来从DOM中提取包含div的高度并将其应用于.div2类。而且我在div1上使用了当前像素高度75px而不是％高度。

基本上从包含div的总高度减去75px（或者你最终为表格上方的部分设置的高度）并将其作为.div2的css高度

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

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

<强> ::代码::

:: JS :: - ＆gt;使用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 :: - ＆gt;只进行了这一次调整

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

使div垂直适合父div，其中一个滚动条

2 个答案: