html - 三行模态，带有固定的标题、底行和可滚动的中间行

Question

我正在尝试创建一个具有顶部、中间和底部的模态。顶部始终是固定高度。

底部必须“粘”在底部，并且可能会有所不同。其中的所有内容和元素都必须从底部构建。因此，如果只有一行文本，底部将是该行的高度。如果有 3 或 4 行文本，底部会根据需要向上推。

中间需要填满剩下的所有内容，和如果内容overflow-y的它必须显示滚动条并且不干扰顶部或底行。

我该怎么做？当我尝试 overflow-y: auto 时，我发现它不起作用，大概是因为没有高度，而是将表格推到 #wrap 的边界之外分区

这是一个 CodePen:https://codepen.io/sfullman/pen/XGZoJb

    body{
      font-family: Arial;
    }
    .table{
      display: table;
      height: 100%;
      width: 100%;
    }
    .row{
      display: table-row;
    }
    .cell{
      display: table-cell;
      width: 75%;
    }
    #top{
      background-color: burlywood;
      height: 41px;
    }
    #middle .cell{
      overflow-y: scroll;
    }
    #bottom{
      height: 15px; /* make this height less than expected height, table row/cell behavior will successfully exceed it an push content up */
      border-top: 1px solid darkred;
      background-color: rgba(0,0,0,.15);
    }
    #wrap{
      /* this div is designed to be a dialog/modal and will normally be abs. positioned */
      border: 1px solid darkred;
      width: 425px;
      height: 300px;
      position: absolute;
      top: 20px;
      left: 20px;
    }

    <div id="wrap">
      <div id="innerTable" class="table">
      <div id="top" class="row">
        <div class="cell">
        top
        </div>
      </div>
      <div id="middle" class="row">
        <div class="cell">
          middle<br>
          middle<br>
          middle<br>
          middle<br>
          middle<br>
          middle<br>
          middle<br>
          middle<br>
          middle<br>
          middle<br>
          middle<br>
          middle<br>
        </div>
      </div>
      <div id="bottom" class="row">
        <div class="cell">
        bottom<br>
        bottom<br>
        bottom<br>
        </div>
      </div>
    </div>
    </div>

Answer 1

在网上搜索后，我在 JS fiddle 上找到了一些东西，然后我修改它来创建解决方案 here

这是 HTML:

<div id="body">
     <div id="head">
       <!-- if your have content larger than declared height here, it will simply roll under the bottom with no scrolling -->
        <p>Fixed size without scrollbar 1</p>
        <p>Fixed size without scrollbar 2</p>
        <p>Fixed size without scrollbar 3</p>
        <p>Fixed size without scrollbar 4</p>
    </div> 
    <div id="content">
        <!--
        add or remove these to see scrool/non-scroll behavior
        -->
        <p>Dynamic size with scrollbar</p>
        <p>Dynamic size with scrollbar</p>
        <p>Dynamic size with scrollbar</p>
        <p>Dynamic size with scrollbar</p>
        <p>Dynamic size with scrollbar</p>
        <p>Dynamic size with scrollbar</p>
        <!--
        <p>Dynamic size with scrollbar</p>
        <p>Dynamic size with scrollbar</p>
        <p>Dynamic size with scrollbar</p>
        <p>Dynamic size with scrollbar</p>
        <p>Dynamic size with scrollbar</p>
        <p>Dynamic size with scrollbar</p>
        <p>Dynamic size with scrollbar</p>
        <p>Dynamic size with scrollbar</p>
        <p>Dynamic size with scrollbar</p>
        <p>Dynamic size with scrollbar</p>
        <p>Dynamic size with scrollbar</p>
        <p>Dynamic size with scrollbar</p>
        <p>Dynamic size with scrollbar</p>
        <p>Dynamic size with scrollbar</p>
        <p>Dynamic size with scrollbar</p>
        <p>Dynamic size with scrollbar</p>
        <p>Dynamic size with scrollbar</p>
        -->
    </div>
    <div id="foot">
      <!-- this content will build from the bottom, pushing the top wall up. #content's bottom will adjust up accordingly -->
        <p>Dynamic size without scrollbar 1</p>
        <p>Dynamic size without scrollbar 2</p>
        <p>Dynamic size without scrollbar 3</p>
    </div> 
</div>

还有 CSS:

#body {
    position: absolute;
    top: 15px;
    left: 15px;
    height: 300px;
    width: 500px;
    outline: black dashed 1px;
    display: flex;
    flex-direction: column;
}

#head {
    /*border: blue solid 1px;*/
    background-color: rgba(0,0,255,0.25);
    height: 50px;
    flex-shrink: 0;
}
#content{
    /*border: red solid 1px;*/
    background-color: palegoldenrod;
    overflow-y: auto;
    height: 100%;
}

#foot {
    /*border: green solid 1px;*/
    background-color: whitesmoke;
    flex-shrink: 0;
}