<div class="header"> <ul> <li><a href="#auto">Auto</a></li> <li><a href="#fit">Fit</a></li> <li><a href="#wide">Wide</a></li> </ul> </div> <div class="container box"> <div class="anchor" id="auto"></div> <div class="section red"> <p>Auto height and width</p> </div> <div class="section green"> <p>Auto height and width</p> <p><img src="http://placehold.it/640x360" alt="" /></p> </div> <div class="section blue"> <p>Auto height and width</p> </div> <div class="section yellow"> <p>Auto height and width</p> </div> <div class="anchor" id="fit"></div> <div class="section fit red"> <div class="t"> <div class="tc"> <h1>Fit</h1> <p>width and height</p> </div> </div> </div> <div class="section fit green"> <div class="t"> <div class="tc"> <h1>Fit</h1> <p>width and height</p> </div> </div> </div> <div class="section fit blue"> <div class="t"> <div class="tc"> <h1>Fit</h1> <p>width and height</p> </div> </div> </div> <div class="section fit yellow"> <div class="t"> <div class="tc"> <h1>Fit</h1> <p>width and height</p> </div> </div> </div> <div class="anchor" id="wide"></div> <div class="section wide red"> <div class="content"> <div class="t"> <div class="tc"> <h1>Widescreen</h1> <p>16:9</p> </div> </div> </div> </div> <div class="section wide green"> <div class="content"> <div class="t"> <div class="tc"> <h1>Widescreen</h1> <p>16:9</p> </div> </div> </div> </div> <div class="section wide blue"> <div class="content"> <div class="t"> <div class="tc"> <h1>Widescreen</h1> <p>16:9</p> </div> </div> </div> </div> <div class="section wide yellow"> <div class="content"> <div class="t"> <div class="tc"> <h1>Widescreen</h1> <p>16:9</p> </div> </div> </div> </div> </div>
/* important style */ html, body { margin: 0; height: 100%; } .header { width: 100%; z-index: 2; position: fixed; background-color: #666; } .header ul { margin: 0; padding: 0; overflow: auto; list-style: none; } .header li { float: left; padding: 10px; } .header li a { color: #fff; } .container { padding-top: 38px; /* offset the height of the fixed nav to ensure height 100% is correct */ height: 100%; } .box { -webkit-box-sizing: border-box; -moz-box-sizing: border-box; box-sizing: border-box; } .section { position: relative; width: 100%; } .section img { max-width: 100%; } .anchor { padding-top: 38px; margin-top: -38px; } .section p { margin: 0; } /* sizes */ .fit { height: 100%; } .wide { height: auto; padding-top: 56.25%; /* 9 / 16 = 0.5625 */ } .wide .content { position: absolute; top: 0; left: 0; bottom: 0; right: 0; } /* centering */ .t { display: table; width: 100%; height: 100%; } .tc { display: table-cell; vertical-align: middle; text-align: center; } /* colours */ .red { background-color: red; } .green { background-color: green; } .blue { background-color: blue; } .yellow { background-color: yellow; }