HTML table full height and width with no scrolling - html

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>

Answer 1

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