JSFiddle - React, Tailwind, and code Playground

by Tsuneo Yoshioka

HTML

<div class="content">
    <div>
        <img src="http://mrg.bz/ccyR3V" class="header" />
    </div>
    <div class="mainWpr">
        <img src="http://mrg.bz/qmVoy1" class="main" />
    </div>
    <div>
        <div class="footer">
            Here is footer. height is not fixed.Here is footer. height is not fixed.Here is footer. height is not fixed.Here is footer. height is not fixed.Here is footer. height is not fixed.Here is footer. height is not fixed.Here is footer. height is not fixed.Here is footer. height is not fixed.Here is footer. height is not fixed.Here is footer. height is not fixed.Here is footer. height is not fixed.Here is footer. height is not fixed.Here is footer. height is not fixed.Here is footer. height is not fixed.Here is footer. height is not fixed.Here is footer. height is not fixed.Here is footer. height is not fixed.Here is footer. height is not fixed.Here is footer. height is not fixed.Here is footer. height is not fixed.Here is footer. height is not fixed.Here is footer. height is not fixed.Here is footer. height is not fixed.Here is footer. height is not fixed.Here is footer. height is not fixed.</div>
    </div>
</div>

CSS

* {
    margin:0;padding:0;
}
html, body {
    height: 100%;
}
.header {
    height: 30px;
    width: 100%;
}
.mainWpr {
    height: 100%;
}
.main {
    width: 100%;
    height: 100%;
}
.footer {
    width: 100%;
}
.content {
    height: 100%;
    width: 100%;
    display:table;
}
.content > div {
    display:table-row;
}