JSFiddle - React, Tailwind, and code Playground

by jiawen ge

HTML

<div id="wrap">
	<div id="header">
        i am header.
	</div>
	<div id="main" class="clearfix">
        i am content.
	</div>
</div>

<div id="footer">
    i am footer
</div>

CSS

html, body, #wrap {
    height: 100%;
    margin: 0;
    padding: 0;
}

#wrap {
    height: auto; min-height: 100%;
}

#main {
    padding-bottom: 150px; /* must be same height as the footer */
}  

#footer {
    position: relative;
	margin-top: -150px; /* negative value of footer height */
	height: 150px;
	clear:both;
    background-color: #ccc;
}