clubmate.fi

A good[ish] website

Web development blog, loads of UI and JavaScript topics

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

Filed under: UI components— Tagged with: layout

One really sucky thing about CSS is it’s lack to make stuff 100% height. You’ll face this especially with sidebars, if there is not enough content to fill the sidebar, it falls short and looks ugly. Luckily there are workarounds.

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.

See a Demo qrfsu

The pseudo elements method

This is a bit more "hacky" in a way, but works great. You just fixed position the sidebar pseudo elements. 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.

See a Demo eqrFG

One day the flexbox method will gain browser support and we can use it. Meanwhile, we have to use these.

Comments would go here, but the commenting system isn’t ready yet, sorry.

  • © 2022 Antti Hiljá
  • About
  • All rights reserved yadda yadda.
  • I can put just about anything here, no one reads the footer anyways.
  • I love u!