JSFiddle - React, Tailwind, and code Playground

by goodfriend

HTML

<div class="main">
			<div>
				<div class="header">this is header</div>
				<div class="content">
					<div class="content-box">This example has a sticky footer.  If I put a lot of content here, this white area and the cyan exterior will stretch, and the red footer will still be at the bottom.  This is intended (<a href="eatall2.htm">See Example</a>)  <br><br>
					My question is, what is needed to get this white "content-box" to stretch the entire height of the screen when there is not enough content to push it down?  <br>

         </div>
				</div>
				<div class="footer">footer</div>
			</div>
		</div>

CSS

html {  height:100%;min-height:100% !important;margin:0;padding:0;   /** see height, min-height values here. **/ }
			body{  overflow:auto;padding:0;margin:0;height:100%;min-height:100% !important;   /** see height, min-height values here. **/ }
			.main {   				position:relative;min-height:100%; height:auto; background:cyan;
				/** see position, height, min-height values here. Height auto to make sure
				that main div resizes if window size changes after initial rendering **/
			}


			.header { display:block;height:50px;position:relative;background:yellow;text-align:center;padding:10px; }
			.content { padding:0px;margin-bottom:50px; /** bottom margin here to make sure that footer does not cover the content area **/  }
			.footer { display:block;position:absolute;bottom:0;left:0;width:100%;height:50px;background:red;color:white;text-align:center;padding:10px;  /** see position, top, left, and width properties here. **/  }

			.content-box {
			    margin: 0 auto 0 auto;
				width: 750px;
				background-color: #FFFFFF;
				text-align: left;
				border-right: 1px solid #B0B0B0;
				border-left: 1px solid #B0B0B0;
				padding-bottom: 20px;
				padding-top: 20px;
				min-height: 100%;
				height: 100%;
			}