Three-row Modal With Fixed With Header, Bottom Row, And Scrollable Middle Row

I am trying to create a modal with a top, middle and bottom. The top is always fixed height. The bottom must be 'glued' to the bottom and may vary some. All content and elements

Solution 1:

After searching on the web, I found something on JS fiddle which I then modified to create the solution here

Here is the HTML:

<divid="body"><divid="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><divid="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><divid="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>

And the 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;
}

Solution 2:

I have created an example using 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: 6px20px;
  background: #004141;
  color: #fff;
}

.content {
  background: #ddd;
}

<divclass="container"><divclass="main"><divclass="header">Main header Main headerMain headerMain headerMain headerMain headerMain headerMain header</div><divclass="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><divclass="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>

The center row scrolls while having a fixed header and fixed footer of varying heights.

Solution 3:

The idea is to have a column flexbox with a max-height setting that fills the container inside which its kept - see demo below for a full-viewport setup (this is based on 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;
}

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

Note that the height of the header and footer can vary dynamically here - this works even if you do not have a fixed height for them. For more complicated layouts, however the newer CSS Grid layouts are preferred as flexboxes are 1D layouts while CSS Grid is a 2D layouting solution - see one example here

---

Solution

Now I will adapt this to your code - see how it works when there is a lot of content in the middle section:

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;
}

<divid="wrap"><divid="innerTable"class="table"><divid="top"class="row"><divclass="cell">
        top
      </div></div><divid="middle"class="row"><divclass="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><divid="bottom"class="row"><divclass="cell">
        bottom
      </div></div></div></div>

Now see how it works when the content is very less in the middle section - note how the footer section is glued to the bottom:

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;
}

<divid="wrap"><divid="innerTable"class="table"><divid="top"class="row"><divclass="cell">
        top
      </div></div><divid="middle"class="row"><divclass="cell">
        middle<br> middle
        <br> middle
        <br> middle
        <br> middle

        <br> middle
        <br> middle
        <br> middle
        <br> middle
        <br> middle
        <br> middle
      </div></div><divid="bottom"class="row"><divclass="cell">
        bottom
      </div></div></div></div>