Div height 100% minus Xpx solution

Reading time ~1 minute

CSS should be more friendly. I feel it should have certain math qualities, such as variables, addition, subtraction, multiplication etc.

A certain problem that is fairly common when working with a 3 or 4 part layout where you have a header, a sidebar and content (sometimes even a footer) Typically if you want to have your content and/or sidebar extend from just below the header to the very bottom, without adding more to the page, requiring useless scroll-down-to-nothingness, this is difficult to do.

Your first instinct is to make the content height 100%. This doesn't work because you have a header already there, so the height of your page is now 100% + the height of your header. FRUSTRATING, but I get it CSS. I get it.

Easy solution: 100% - 50px. WRONG Like I said. CSS doesn't do math. So what CAN you do?

See this JSFiddle. This is an example solution of what I am talking about. It's pretty simple solution.

.content {
    position: absolute; /* very important, this will not work without */
    top: 50px; /* Set this to the value of the height of whatever div(s) is above it*/
    right: 0px; /* Absolute will kill your floats, so place it where you need */
    bottom: 0px; /* This will force the bottom of the div to the bottom. */
The key here is making sure that you understand that you are no longer floating these divs. Because of this, it may not be the ideal solution for all things, but it definitely is great if you are working on full screen layouts.

This post was kinda thrown on here as an afterthought, so I'm sorry if it is rushed, and please comment below if I missed something, or if you have any suggestions.


Quick Laravel/Lumen install with Docker!

The default installer that comes with Laravel is great, but unfortunately that means you have to install dependencies of PHP and Laravel/...… Continue reading

PHP To Python

Published on February 24, 2016

Aftertouch in Logic Pro X and 2015 Macbook Pro

Published on February 24, 2016