JSFiddle - React, Tailwind, and code Playground

by sjmcpherson

HTML

<div class="page-wrap">
  
  <h1>Sticky Footer</h1>
  <h2>with Fixed Footer Height</h2>
  
 
     
</div>

<div class="footer ">
  <iframe src="http://www.cnn.com" frameBorder="0"
   ></iframe>
</div>

CSS

/* Mostly: http://ryanfait.com/sticky-footer/ */

* {
	margin: 0;
}
html, body {
	height: 100%;
}
.page-wrap {
  min-height: 100%;
  /* equal to footer height */
	margin-bottom: -287.2px; 
}
.page-wrap:after {
  content: "";
  display: block;
}
.footer, .page-wrap:after {
  /* .push must be the same height as footer */
	height: 287.2px; 
}

iframe{width:100%;overflow:hidden;height:100%;display:block; }