# 100% height sidebars without images, unsemantic HTML elements, or flexbox

One really frustrating thing about CSS is its lack of a way to make things 100%
high. You’ll notice this especially with sidebars. If there is not enough
content to fill the sidebar, it falls short and looks ugly. Luckily, there are
workarounds.

This is an old post :)

Requirements for our 100% height sidebar techniques:

- No images
- No unsemantic elements
- Support for IE8

## The display table method

This works like a table layout, but without the table. We can set 100% height to
all the elements. Check the commented code under the HTML and CSS tabs.

You can strip out either one of the sidebars and it still works.

[CodePen](https://codepen.io/hilja/pen/qrfsu)

## The pseudo elements method

This is a bit more "hacky," but it works great. You just position the sidebar
pseudo-elements with `position: fixed`. The downside to this technique is that
you can't animate the sidebars (if you need to get the sidebars out of the way
by toggling their visibility). See the commented code under the CSS and HTML
tabs.

[CodePen](https://codepen.io/hilja/pen/eqrFG)

One day the `flexbox` method will have enough browser support for us to use it.
Meanwhile, we have to use these.