JSFiddle - React, Tailwind, and code Playground

by Jefferson Alison Alves

HTML

<div id="wrap">
		
		<div class="left">Menu</div>
		<div class="right">
			<div class="ratio">
				<div class="slide">
					Aqui é minha area proporcional
				</div>
			</div>
		</div>
		<div id="push"></div>
	</div>

	<div id="footer">
      	<div class="container">
        	<p class="muted credit">
      		  <p>Rodapé</p>
        	</p>
      	</div>
    </div>

CSS

body, html{
    height: 100%
}
#wrap {
  margin: 0 auto -60px;
  min-height: 100%;
  overflow: hidden;
  height: 100%; }

#footer {
  background: #ccc !important;
  position: relative;
    
}
  #footer .container p {
    margin-top: 21px;
    text-align: center;
    color: #808080; }
    
#push, #footer {
  height: 61px; }


.left {
  width: 20%;
  background: red;
  height: 100%;
  float: left; }

.right {
  width: 80%;
  height: 100%;
  float: left;
  background: orange; }
  .right .slide {
    padding-bottom: 75%;
    /* 540/720 */
    background: #a0d; }
  .right .ratio {
    max-height: 715px; }