Static Header And Footer

by onejdc

HTML

<body>
        <div class="container">
            <div class="header">
                   <ul id="nav">
                       <li>
                            <a href="#">Music</a>
                            <ul>
                              <li><a href="#">New Tracks</a></li>
                              <li><a href="#">Old Tunes</a></li>
                              <li><a href="#">Downloads</a></li>
                              <li><a href="#">Upcoming</a></li>
                            </ul>
                            </li>
                        
                         
                            </ul>
                          </li>
                   </ul>
            </div>
            <div class="content">
                <div class="gap"></div>
                <p>First line...............</p>
                <p>Long content goes here...</p>
                <p>Long content goes here...</p>
                <p>Long content goes here...</p>
                <p>Long content goes here...</p>
                <p>Long content goes here...</p>
                <p>Long content goes here...</p>
                <p>Long content goes here...</p>
                <p>Long content goes here...</p>
                <p>Long content goes here...</p>
                <p>Long content goes here...</p>
                <p>Long content goes here...</p>
                <p>Long content goes here...</p>
                <p>Long content goes here...</p>
                <p>Long content goes here...</p>
                <p>Long content goes here...</p>
                <p>Long content goes here...</p>
                <p>Long content goes here...</p>
                <p>Long content goes here...</p>
                <p>Long content goes here...</p>
                <p>Long content goes here...</p>
                <p>Long content goes here...</p>
                <p>Long content goes here...</p>
                <p>Long content goes here...</p>
                <p>Long content goes...

CSS

html {
     height:100%; 
    max-height:100%; 
    padding:0; 
    margin:0; 
    border:0;
    overflow: hidden; 
 }
 body {
     height:100%;
     max-height:100%;
     overflow:hidden;
     padding:0;
     margin:0;
     border:0
     font: 12px Verdana, Helvetica, sans-serif;
     color: #F3F3F3;
 }
 .container {
     width : 100%;
     height: 100%;
     max-height:100%;
 }
 .header {
     position:absolute;
     margin:0;
     top:0;
     display:block;
     width:100%;
     height:80px;
    z-index:5;
     background-color: #656565;
     text-align : center;
     right:18px;
     line-height: 80px;
     font-size:2em;
 }
 .footer {
     position:absolute;
     margin:0;
     bottom:-1px;
     display:block;
     width:100%;
     z-index:4;
     height : 80px;
     background-color: #656565;
     text-align : center;
     right:18px;
     line-height: 80px;
     font-size:2em;
 }
 .content {
     display:block;
     height:100%;
     max-height:100%;
     overflow:auto;
     position:relative;
     z-index:3;
     background-color: #909090;
     text-align : center;
 }
 .gap {height : 80px;}
ul { list-style: none; padding: 0; margin: 0;}

/* Style */

a {
  color: #000;
  display: block;
  font-size: 14px;
  text-decoration: none;
  font-family: 'Open Sans', serif;
}
nav {
  width: 100%;
  height: 45px;
}
#nav ul li:hover,
#nav > li:hover {
  background: #2e98d5;
}
#nav ul > li:hover > a,
#nav > li:hover > a {
  color: #fff;
}
#nav > li {
  float: left;
  position: relative;
}
#nav > li > a {
  padding: 13px 30px;
  height: 20px;
}


/************

This transition is for iOS :hover doubleclick.
http://www.nczonline.net/blog/2012/07/05/ios-has-a-hover-problem/

************/

#nav > li:hover ul {
  visibility: visible;
  -webkit-transition-delay: 0s;
  -moz-transition-delay: 0s;
  -o-transition-delay: 0s;
  transition-delay: 0s;
}
#nav ul {
  top: 46px;
  width: 170px;
  position: absolute;
  background-color: #eee;
  z-index: 1;
  visibility: hidden;
 ...