Full height body with header / footer

Assume a column with a header a body and a sticky footer.

There could be many challenges to address and different ways to address them:

• full height body
• text overflowing in header / footer:
  • force one line and show ...
  • allow text to go on a new line

 ___________     ___________
| header... |   | multiline |
|-----------|   | header    |
| multiline |   |-----------|
| body      |   | multiline |
|           |   | body      |
|           |   |-----------|
|-----------|   | multiline |
| footer... |   | footer    |
|___________|   |___________|

We will work on the following markup:

<div class="column">
    <h2 class="column-header">The column header</h2>
    <div class="column-body">Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et.</div>
    <footer class="column-footer">The column footer</footer>
</div>

Both single and multi line are easy to style using flex boxes. Other approaches have several downsides.

Single line

Forcing the text to a single line can easily be done with

white-space: nowrap;
overflow: hidden;

Then, text-overflow

• ellipsis to show ... at the end of the line.
• clip cut the text overflowing

Multiple line

Forcing the text to show on multiple lines is sometimes required when dealing with dynamic content where the words may be long. MDN: CSS Word-break

word-break: break-all;

Don’t

Don’t use magic numbers

In this case as in the split panel, you should not use approximate percentage values. The following style will seem to give full height to the body in some cases:

.column-body {
    height: 80%;
}

Why is it not appropriate?

It is not appropriate because the height taken by the .column-body is constant. The height taken by 1% varies in function of the height of the parent element. Removing 20% may remove enough height to place the header and footer on big screens, but it won’t for small devices.

Don’t use position absolute

Although placing the elements absolutely would be enough for a fixed height header and footer, we will cover a better way (spoiler alert, flex is part of the solution).

Assuming the height of the header and footer is 50px, a common way to style it could be:

.column-body {
    position: absolute;
    top: 50px;
    bottom: 50px;
}

.column-footer {
    position: absolute;
    bottom: 0;
}

Why is it not appropriate?

The main reason why in this case is the maintainability of the code. Because the height is calculated on a fixed value, any change in the header / footer height will involve a change in the positioning of the body.

Don’t use css calc()

CSS has a very nice feature called calc. It allows to compute values from a mix of units e.g. %, px, etc.

This method would be enough for a fixed height header and footer but we will cover a better way.

Assuming the height of the header and footer is 50px, a common way to style it could be:

.column-body {
    height: calc(100% - 2 * 50px);
}

This method sets the height of .column-body to the full height less the height of the header and footer.

Why is it not appropriate?

The main reason why in this case is the maintainability of the code. Because the height is calculated on a fixed value, any change in the header / footer height will require to change the height of the body.

DO instead

Flex boxes

The flex boxes are very handy in many situations. In this case, they can be used in the following way to solve the issue:

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

.column-body {
    flex: 1 1 auto;
}

.column-header,
.column-footer {
    flex: 0 0 auto;
}

The flex syntax may be a bit scary at first sight, let’s explain that bit:

flex is the short version for:

• flex-grow
• flex-shrink
• flex-basis

In this example, .column-body’s height can grow and shrink. .column-header and .column-footer’s height should only match the height of their respective content.

For a more complete guide, see CSS Tricks: A Complete Guide to Flexbox.

Why is it better?

The big advantage of flex boxes is in the flexibility. The height of .column-header and .column-footer could change, the body would adapt automatically.