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

Question

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

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

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

我该怎么做？我发现尝试overflow-y: auto时不起作用，大概是因为没有高度，而是将表格推到了#wrap div的范围之外。

这是一个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小提琴上找到了一些东西，然后对其进行了修改以创建解决方案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;
}

Answer 2

我已经使用flexbox创建了一个示例：https://codepen.io/jgoncalves/pen/XGEqoj

.container {
  position: absolute;
  top: 0;
  right: 0;
  bottom: 0;
  left: 0;
  display: flex;
}

.main {
  flex: 1;
  display: flex;
  flex-direction: column;
}

.content {
  flex: 1;
  display: flex;
  overflow: auto;
}

body {
  font-family: sans-serif;
  font-size: 20px;
  line-height: 50px;
  text-transform: uppercase;
  font-weight: bold;
}

.header {
  text-align: center;
  color: #fff;
  background: #444;
}

.footer {
  padding: 6px 20px;
  background: #004141;
  color: #fff;
}

.content {
  background: #ddd;
}

<div class="container">
	<div class="main">
      <div class="header">Main header Main headerMain headerMain headerMain headerMain headerMain headerMain header</div>
		<div class="content">
			  Scroll me Scroll meScroll meScroll meScroll meScroll meScroll meScroll meScroll meScroll meScroll meScroll meScroll meScroll meScroll meScroll meScroll meScroll meScroll meScroll meScroll meScroll meScroll meScroll meScroll meScroll meScroll meScroll meScroll meScroll meScroll meScroll meScroll meScroll meScroll meScroll meScroll meScroll meScroll meScroll meScroll meScroll meScroll meScroll meScroll meScroll meScroll meScroll meScroll meScroll meScroll meScroll meScroll meScroll meScroll meScroll meScroll meScroll meScroll meScroll meScroll meScroll meScroll meScroll meScroll meScroll meScroll meScroll meScroll meScroll meScroll meScroll meScroll meScroll meScroll meScroll meScroll meScroll meScroll meScroll meScroll meScroll meScroll meScroll meScroll meScroll meScroll meScroll meScroll meScroll meScroll meScroll meScroll meScroll meScroll meScroll me
		</div>
    <div class="footer">Footer end of page. Footer end of page. Footer end of page. Footer end of page. Footer end of page. Footer end of page. Footer end of page. Footer end of page. </div>
	</div>
</div>

中心行滚动时具有固定的页眉和不同高度的页脚。

Answer 3

这个想法是让一个{em> flexbox 带有一个max-height设置，以填充其中保存的容器-有关完整视口设置，请参见下面的演示（这基于{ {3}}）：

body {
  margin: 0;
}
*{
  box-sizing: border-box;
}
.row {
  display: flex;
  flex-direction: column;
  max-height: 100vh;
}
.flex {
  flex: 1;
  overflow-y: auto;
}
.row, .row > * {
  border: 1px solid;
}

<div class="row">
  <div>some content</div>
  <div class="flex">This fills the available space</div>
  <!-- fills/grows available space -->
  <div>another content</div>
</div>

请注意，header和footer的高度可以在此处动态变化-即使您没有固定的高度，这也可以正常工作。对于更复杂的布局，但是首选新的this flexbox-based question，因为 flexboxs是一维布局，而CSS Grid是 2D布局解决方案-请参见CSS Grid layouts < / p>

---

解决方案

现在，我将对此进行调整以适应您的代码-在middle部分中看到很多内容时，看看它如何工作：

body {
  font-family: Arial;
}

.table {
  display: flex;
  flex-direction: column;
  max-height: 100%;
  width: 100%;
}

.cell {
  width: 75%;
}

#top {
  background-color: burlywood;
}

#middle {
  flex: 1;
  overflow-y: auto;
}

#bottom {
  border-top: 1px solid darkred;
  background-color: rgba(0, 0, 0, .15);
}

#wrap {
  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> middle
        <br> middle
        <br> middle
        <br> middle
        <br> middle
        <br> middle
        <br> middle
        <br> middle
      </div>
    </div>
    <div id="bottom" class="row">
      <div class="cell">
        bottom
      </div>
    </div>
  </div>
</div>

现在，在middle部分中查看内容少得多时的工作原理-注意将footer部分粘合到底部：

body {
  font-family: Arial;
}

.table {
  display: flex;
  flex-direction: column;
  max-height: 100%;
  width: 100%;
}

.cell {
  width: 75%;
}

#top {
  background-color: burlywood;
}

#middle {
  flex: 1;
  overflow-y: auto;
}

#bottom {
  border-top: 1px solid darkred;
  background-color: rgba(0, 0, 0, .15);
}

#wrap {
  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
      </div>
    </div>
    <div id="bottom" class="row">
      <div class="cell">
        bottom
      </div>
    </div>
  </div>
</div>