Just code. Currently, only Sass code, like mixins and placeholders.
This is a simple Sass mixin I created it a long time ago for achieving equal height columns without flexbox.
HTML structure, where nav and sections are siblings (share the same parent element).
<nav>Sidebar navigation</nav>
<section>A random section of content</section>
<section>Another section of content</section>Sass
section, nav
+equal-heightDone! nav and both sections got the same height.
It doesn't matter the content, how many columns you have, neither the nav nor section's height, nor if you don't have a container wrapping the siblings. It just works, and without neither position: absolute nor background-image.
If displaying the parent as tables and the children as table-cells isn't a problem for your code at all, just use it. Since you are not using actual tables, there's no reason to feel bad here.
Note:
display: tablealways will inherit to the parent elementbodyunless you set$wrapper(see below).
It sets a wrapper for the columns.
Type: string
Default: body
- Documentation for Sass snippets.
To the extent possible under law, Diéssica Gurskas has waived all copyright and related or neighboring rights to this work.