HTML table full height and width with no scrolling

Question

I want to have a fixed height header, table with full height/width, and then some divs below that, preferably using flexbox.

How do I do that without getting scroll bars, so that everything takes up the full page?

Here's my attempt: https://jsfiddle.net/1nyv4pqk/2/

html, body {
  height: 100%;
  width: 100%;
  margin: 0px;
}
.outter {
  display: flex;
  flex-direction: column;
  height: 100%;
  background-color: red;
}
.header {
  background-color: gray;
  height: 3em;
}
.content {
  height: 100%;
  background-color: green;
}
.footerClass {
  background: yellow;
  height: 3em;
}
.tableClass {
  margin: 10px;
  height: 100%;
  width: 100%;
  border: 2px solid;
  border-collapse: collapse;
  border-spacing: 0;
}
.tableClass th,
.tableClass td {
  border: 1px solid black;
}

<div class="outter">
  <div class="header">This is a header</div>
  <div class="content">
    <table class="tableClass">
      <thead>
        <tr>
          <th>COL 1</th>
          <th>COL 2</th>
          <th>COL 3</th>
          <th>COL 4</th>
        </tr>
      </thead>
      <tbody>
        <tr>
          <td>1</td>
          <td>This is some text in row 1</td>
          <td>1</td>
          <td>3</td>
        </tr>
        <tr>
          <td>2</td>
          <td>This is some text in row 2</td>
          <td>1</td>
          <td>3</td>
        </tr>
        <tr>
          <td>3</td>
          <td>This is some text in row 3</td>
          <td>3,4,5</td>
          <td>1</td>
        </tr>
        <tr>
          <td>4</td>
          <td>This is some text in row 4</td>
          <td>2,6,7</td>
          <td>2</td>
        </tr>
      </tbody>
    </table>
    <div>
      Another Div
    </div>
    <div class="footerClass">
      This is a footer
    </div>
  </div>
</div>

all you're divs (except of the table) has fixed or dinamic height? — P.S., Jul 19 '16 at 18:36
No, I want any divs between table and footer to have the ability to be a fixed height, take up vertical space as needed, or a percentage. — dustydojo, Jul 19 '16 at 19:04

Michael Benjamin · Accepted Answer · 2016-07-19T18:29:45.150

3

You have height: 100% on your containers.

But in your .outter container you have these children:

.header {
  background-color: gray;
  height: 3em;
}

.content {
  height: 100%;
  background-color: green;
}

Here's how this plays out:

3em + 100% = vertical overflow = vertical scrollbar

Compensate for the header height. Make this adjustment:

.content {
  height: calc(100% - 3em);
  background-color: green;
}

A similar height adjustment must be applied to the child of .content:

.tableClass {
  margin: 10px;
  height: calc(100% - 3em - 20px - 19.0909px); /* height, less footer height, less margin
                                                  heights, less "Another Div" height */
  width: 100%;
  border: 2px solid;
  border-collapse: collapse;
  border-spacing: 0;
}

In terms of the width, you have this:

.tableClass {
  margin: 10px;
  height: 100%;
  width: 100%;
  border: 2px solid;
  border-collapse: collapse;
  border-spacing: 0;
}

The margin is adding to the width: 100%, causing a horizontal scroll.

Compensate for the overflow with: width: calc(100% - 20px).

Also add * { box-sizing: border-border; }, so borders and padding are factored into width and height declarations.

Revised Fiddle

edited Jul 19 '16 at 18:29

answered Jul 19 '16 at 17:52

Michael Benjamin

346,931
104
581
701

How do you account for when the "Another Div" starts getting bigger? I get scroll bars again when I add a few paragraphs https://jsfiddle.net/1nyv4pqk/4/ – dustydojo Jul 19 '16 at 18:55
You can specify a height, so it can be factored into the container's calculation. Or use flex properties. – Michael Benjamin Jul 19 '16 at 19:23
I don't want to have to specify a height, so what do you mean by using flex properties? – dustydojo Jul 20 '16 at 12:39
The `flex-grow` property enables elements to occupy remaining space in a container. Here's an example for columns, that could just as easily be applied to rows: http://stackoverflow.com/q/23794713/3597276 – Michael Benjamin Jul 20 '16 at 12:49

HTML table full height and width with no scrolling

1 Answers1