JSFiddle - React, Tailwind, and code Playground

by dcf104

HTML

<body>

<header>
		<div id="top-bar">
			<div id="top-bar-content">
				header 980px wide
			</div>
		</div>
	</header>

	<nav>
		<div id="nav-bar">
			<div id="nav-bar-content">
				navigation 980px wide
			</div>
		</div>
	</nav>  




	<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

* 											{ margin: 0;}

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; }

#top-bar									{ background: #424242; }
#top-bar-content							{ width: 980px; color: white; margin: 0 auto; }

#nav-bar                            		{ background: #0b75b2; line-height: 42px;}
#nav-bar-content							{ width: 980px; color: white; margin: 0 auto; }

#content									{ width:980px; margin: 0 auto; border-left: 2px solid red; border-right: 2px solid red; 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;}