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

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

我们的想法是让一个带有max-height设置的列flexbox填充其保存的容器 - 请参阅下面的演示以获得全视口设置（这是基于this flexbox-based question）：

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的高度在这里可以动态变化 - 即使您没有固定的高度，这也会有效。对于更复杂的布局，然而较新的CSS Grid layouts是首选，因为flexbox是1D布局，而CSS Grid是2D布局解决方案 - 请参阅one example here

---

解

现在我将把它改编为你的代码 - 当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>