JSFiddle - React, Tailwind, and code Playground

by iii l

HTML

<div class="wrap">
    <div class="header">header</div>
    <div class="cont">
        <div class="content">
            <div class="left">left</div>
            <div class="right">right</div>
        </div>
    </div>
</div>
<div class="footer">
    footer
</div>

CSS

body,html {
	height: 100%;
}
.wrap {
	min-height: 100%;
	margin: 0 auto -60px;
    position:relative;
}
.header {
    height:50px;
    background: #021456;
}
.footer {
	height: 60px;
    background:green;
}
.cont {
    position:absolute;
    top:50px;
    bottom:60px;
    left:0;
    right:0;
    margin:0 auto;
}
.content {
    margin: 0 auto;
    width:400px;
    height:100%;
}
.left, .right {
    height:100%;
}
.left {
    float:left;
    background:#ef4578;
}
.right {
    background:#425633;
}