0

I have a page with the following layout requirements:

  • a header with a fixed height
  • a footer with a fixed height
  • 2 divs (one on the left, one on the right) in the centre of the page who's height fills the space between the header and the footer
  • a table inside the left div

Visually this should look as follows:

enter image description here

And I have gotten this working in code here: https://jsfiddle.net/1kxtby5c/2/

body {
  background-color: pink;
  padding: 0;
  margin: 0;
}

.wrap {
  display: flex;
  flex-direction: column;
  width: 100vw;
  height: 100vh;
}

.top {
  background-color: red;
  height: 100px;
}

.middle {
  background-color: lightblue;
  flex: 1;
}

.bottom {
  background-color: green;
  height: 100px;
}

.inner-window {
  background-color: peachpuff;
  height: 100%;
  width: 45%;
}

#left {
  float: left;
}

#right {
  float: right;
}

The problem is that the table (being populated with an AJAX request) will be very tall. When the table height exceeds the height of the left div, I want the table to overflow and scroll, like this:

enter image description here

However what is actually happening is that the div height is growing to accommodate the table, and so the header and footer are being pushed off the page. You can see this here: https://jsfiddle.net/n8o065y2/

I understand that this happens because I have told the middle div to grow, but I don't know how to tell it "grow to fill the space between the header and footer, then stop growing to accommodate the tables large height".

Thanks!

Espresso
  • 740
  • 13
  • 32
  • overflow: auto; to middle? – Temani Afif Aug 23 '20 at 19:16
  • https://stackoverflow.com/questions/25098042/fill-remaining-vertical-space-with-css-using-displayflex/25098486#25098486 or https://stackoverflow.com/questions/23090136/how-can-i-make-my-flexbox-layout-take-100-vertical-space/23090449#23090449 ? both are about flex-grow ... and also https://stackoverflow.com/questions/36247140/why-dont-flex-items-shrink-past-content-size/36247448 to trigger scroll https://jsfiddle.net/agcbt2d7/ – G-Cyrillus Aug 23 '20 at 19:19

1 Answers1

1

You need to implement this inside your project.

Main fixes:

  • middle .body { overflow: auto; }

  • left container .left { overflow: auto; }

  • removed float: right / left. made middle body flex and flex: 1 to children.

    Then right and left margin accordingly.

Check the snippet or your JSFiddle here

.main-container {
  display: flex;
  flex-direction: column;
  height: 100%;
}

.header {
  background-color: orange;
  height: 50px;
}

.body {
  flex: 1;
  display: flex;
  overflow: auto;
  background-color: lightblue;
}

.left {
  flex: 1;
  overflow: auto;
  margin-right: 5%;
  background-color: white;
}

.right {
  flex: 1;
  background-color: pink;
  margin-left: 5%;
}

.footer {
  background-color: black;
  height: 50px;
}

body {
  height: 100vh;
  margin: 0;
}
<div class="main-container">
  <div class="header"></div>
  <div class="body">
    <div class="left">
      <table>
        <thead>
          <tr>
            <th>Header One</th>
            <th>Header Two</th>
          </tr>
        </thead>
        <tbody>
          <tr>
            <td>a</td>
            <td>b</td>
          </tr>
          <tr>
            <td>a</td>
            <td>b</td>
          </tr>
          <tr>
            <td>a</td>
            <td>b</td>
          </tr>
          <tr>
            <td>a</td>
            <td>b</td>
          </tr>
          <tr>
            <td>a</td>
            <td>b</td>
          </tr>
          <tr>
            <td>a</td>
            <td>b</td>
          </tr>
          <tr>
            <td>a</td>
            <td>b</td>
          </tr>
          <tr>
            <td>a</td>
            <td>b</td>
          </tr>
          <tr>
            <td>a</td>
            <td>b</td>
          </tr>
          <tr>
            <td>a</td>
            <td>b</td>
          </tr>
          <tr>
            <td>a</td>
            <td>b</td>
          </tr>
          <tr>
            <td>a</td>
            <td>b</td>
          </tr>
          <tr>
            <td>a</td>
            <td>b</td>
          </tr>
          <tr>
            <td>a</td>
            <td>b</td>
          </tr>
          <tr>
            <td>a</td>
            <td>b</td>
          </tr>
          <tr>
            <td>a</td>
            <td>b</td>
          </tr>
          <tr>
            <td>a</td>
            <td>b</td>
          </tr>
          <tr>
            <td>a</td>
            <td>b</td>
          </tr>
          <tr>
            <td>a</td>
            <td>b</td>
          </tr>
          <tr>
            <td>a</td>
            <td>b</td>
          </tr>
          <tr>
            <td>a</td>
            <td>b</td>
          </tr>
          <tr>
            <td>a</td>
            <td>b</td>
          </tr>
          <tr>
            <td>a</td>
            <td>b</td>
          </tr>
          <tr>
            <td>a</td>
            <td>b</td>
          </tr>
          <tr>
            <td>a</td>
            <td>b</td>
          </tr>
          <tr>
            <td>a</td>
            <td>b</td>
          </tr>
          <tr>
            <td>a</td>
            <td>b</td>
          </tr>
          <tr>
            <td>a</td>
            <td>b</td>
          </tr>
          <tr>
            <td>a</td>
            <td>b</td>
          </tr>
          <tr>
            <td>a</td>
            <td>b</td>
          </tr>
        </tbody>
      </table>
    </div>
    <div class="right"></div>
  </div>
  <div class="footer"></div>
</div>
Ajeet Eppakayala
  • 1,186
  • 1
  • 10
  • 17