JSFiddle - React, Tailwind, and code Playground

by dandv

HTML

<div class="wrapper">
    <div class="content">
        <h2>Content</h2>
    </div>
    <div class="footer">
        <h3>Sticky footer</h3>
        <p>Footer of variable height</p>
    </div>
</div>

CSS

html, body {
    height: 100%;
    margin: 0;
}
.wrapper {
    display: table;
    height: 100%;
    width: 100%;
    background: yellow;
}
.content {
    display: table-row;  /* height is dynamic, and will expand as content is added (won't scroll) */
    height: 100%;
    background: turquoise;
}
.footer {
    display: table-row;
    background: lightgray;
}