There is an ever-present need in the design world for containers of equal height within a document. Unfortunately, there is a serious lack of support currently for this concept. I’ve been hearing for quite some time that Flexbox is going to be our savior but support is not quite there yet.
In the meantime, there are several interesting techniques I’ve come across in recent history. Table display,
display:table; (parent) and
display:table-cell; (child) is frequently my go-to but recently I came across another css technique that is elegant and, I would think, even more tolerant of variations.
CSS Padding and Margins to the Rescue
In essence, you want to give an overly large amount of padding at the bottom of each child element and counter it with an equal amount of negative margin. Then, wrap the children in a parent container with an
overflow:hidden; to clip off all of that excess at the bottom that we do not want.
Of course, no good article would be complete without citing our sources. The example code and my introduction to this technique came from http://callmenick.com/post/css-equal-height-columns-three-different-ways. I am not sure who ought to receive original credit for the concept. I do not see it referenced from nick’s site. Whomever you are, thank you!Tags: css, layout