JSFiddle - React, Tailwind, and code Playground

by Tsuneo Yoshioka

HTML

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

CSS

.header{
    height: 30px;
    width: 100%;
}
.main{
    position: absolute;
    width: 100%;
    height: 50%;
}
.footer{
    position: absolute;
    bottom: 0px;
    width: 100%;
}
.content{
    position: absolute;
    height: 100%;
    width: 100%;
}