html – 使div垂直适合父div,其中一个滚动条

2023年7月27日 207次阅读

我希望在一个容器内有两个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作为它的高度.

最佳答案 这是我使用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/

点赞