layouts

HTML

<div class="outer">
	<header>
		movistar ovacion
	</header>

	<div id="content" >

		<section class="step-1">
			
			<div class="box">
				<a href="#">HOMBRE</a>
			</div>
			<div class="box">
				<a href="#">MUJER</a>
			</div>
			<div class="box">
				<a href="#">NIÑO</a>
			</div>
			<div class="box">
				<a href="#">NIÑA</a>
			</div>

		</section>
	
	</div>

	<footer>
		footer
	</footer>
</div>

CSS

html,body{
    height: 100%;
}

.outer {
    position: relative;
    height: 100%;
}

header {
    position: absolute;
    top: 0;
    width: 100%;
    height: 160px;
    background: blue;
}

#content {
    position: absolute;
    top: 160px;   /* = height of the header */
    bottom: 60px; /* = height of the footer */
    width: 100%;
}

footer {
    height: 60px;
    position:absolute;
    width:100%;
    bottom:0; 
    background: green;
}


.step-1 > div {
    width: 50%;
    height: 50%;
    top: 0;
    position: absolute;		
}

.step-1 > div:first-child {
    background: #DDD;
    left: 0;
    top: 0;
}
.step-1 > div:nth-child(2) {
    background: #CCC;
    right: 0;
    top: 0;
}
.step-1 > div:nth-child(3) {
    background: #72CCA7;
    left: 0;
    bottom: 0;	
}
.step-1 > div:nth-child(4) {
    background: #10A296;
    right: 0;
    bottom: 0;
}