JSFiddle - React, Tailwind, and code Playground

by dcf104

HTML

<!Doctype html>  
 
<title>Title Goes Here</title>  

<body>
	<div class="page-wrap">
	
		<div id="content">	
  
			Content! <br><br>
			Content! <br><br>
			Content! <br><br>
			Content! <br><br>
        </div>
   </div>
<body>

<footer class="site-footer">
  	<div id="site-footer-content">
	  	I'm the Sticky Footer.
  	</div>
</footer>

CSS

html, body 									{ height: 100%; }
body										{background : url(images/debut_light.png) top center repeat;height: 100%;}
.page-wrap 									{ min-height: 100%; /* equal to footer height */ margin-bottom: -180px; }
.page-wrap:after 							{ content: ""; display: block; }

#content									{ width:980px; margin: 0 auto; border-left: 2px solid green; border-right: 2px solid green; background: #fbfbfb; height: 100%;}
.site-footer, .page-wrap:after 				{ /* .push must be the same height as footer */ height: 180px;  }
.site-footer 								{ background: #272727; border-top: 4px solid #0b75b2; }

#site-footer-content						{ width: 980px; margin: 0 auto; color: yellow;}