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">
        <textarea class="main">
            aaaa
        </textarea>
    </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%;
    background: wheat;
    display:block;
}
.footer {
    width: 100%;
}
.content {
    height: 100%;
    width: 100%;
    display:table;
}
.content > div {
    display:table-row;
}