带有标头，底部和可滚动中间行的三线模式

Question

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

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

中间需要填充所有剩下的所有内容，和如果内容overflow-y的s必须显示滚动条，而不会干扰顶部或底部。

我该怎么做？我发现当我尝试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小提琴上找到了一些东西，然后对此进行了修改以在此处创建解决方案

这是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

这个想法是将A 列Flexbox 带有max-height设置，该设置填充其内部的容器 - 请参阅下面的演示以获取完整视图的设置基于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网格为A 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>