full or equal height columns css

full or equal height columns css

by Aqeel Malik

HTML

<!--
Name  : Aqeel Malik (Web Developer)
Email : [email protected]
Mobile: +92 302 6262164
Skills: xHTML | HTML5 | CSS3 | Bootstrap | Wordpress | Javascript | jQuery | Ajax | PHP-MySQL | Photoshop | Firework | Dreamweaver
-->
<header>
  <h1>Wemblo Technlogies</h1>
</header>
<aside>
  <nav>
    <a href="#">Link 1</a>
    <a href="#">Link 2</a>
    <a href="http://wemblo.com/" target="_blank">Visit to Wemblo</a>
  </nav>
</aside>
<main>
  <p>Wemblo Technologies is an internationally acclaimed leading Web Designing and Web Development Corporation offering high quality Web-based Multimedia Services & Solutions across a number of platforms which include, Content Management Systems etc... </p>
</main>

CSS

/*
Name  : Aqeel Malik (Web Developer)
Email : [email protected]
Mobile: +92 302 6262164
Skills: xHTML | HTML5 | CSS3 | Bootstrap | Wordpress | Javascript | jQuery | Ajax | PHP-MySQL | Photoshop | Firework | Dreamweaver
*/

 *,
  html,
  body {
    margin: 0;
    padding: 0;
    border: 0;
    outline: none;
    list-style: none;
  }
  
  body {
    width: 100%;
    height: 100%;
    text-align: center;
  }
  
  header {
    width: 100%;
    height: 50px;
    position: fixed;
    background-color: darkseagreen;
  }
  
  aside,
  main {
    top: 50px;
    /*- minus header height -*/
    left: 0;
    bottom: 0;
    overflow: auto;
    position: absolute;
  }
  
  aside {
    width: 200px;
    background-color: azure;
  }
  
  main {
    right: 0;
    left: 200px;
    /*- minus aside width -*/
    min-width: 200px;
    background-color: antiquewhite;
  }
  
  nav a {
    padding: 10px;
    display: block;
    text-decoration: none;
    background-color: aliceblue;
    border-bottom: 1px solid azure;
  }