title: CSS Sticky header, footer and sidebar
body: <p>I have a web page with a sticky header, sticky sidebar and sticky footer but can't get the content to be padded on the right(padding just gets ignored) and my in-page links don't work correctly. I want to do this with <strong>CSS ONLY</strong>.</p>
  
  <p><a href="http://jsfiddle.net/C7v9f/" rel="nofollow">http://jsfiddle.net/C7v9f/</a></p>
  
  <p>I know there are many other similar questions but their solutions either don't work; their too old; they've never been answered; they use jQuery, JavaScript etc. or they fall apart after adding things like line-height or padding.</p>
  
  <pre><code>html, body {
      height: 100%;
      color: #fff;
  }
  body, p {
      margin: 0;
      padding: 0;
  }    
  #wrap {
      min-height: 100%;
      height: auto !important;
      height: 100%;
      overflow: auto;
      background: #888;
  }    
  #header {
      height: 55px;
      background: #222;
      position: fixed;
      width: 100%;
      z-index: 4;
  }
  
  #SC-wrap {
      float: left;
      margin-bottom: 40px;
  }
  
  
  /* BEGIN HEADER NAV */
  #nav {    
      padding-left: 32%;        
  }
   #nav li{
      position: relative;
      display: inline;
      color: white;
  }
  #nav a {
      display: inline-block;
      padding:10px;
  }
  #nav ul {
      position: absolute;
      /*top:100%; Uncommenting this makes the dropdowns work in IE7 but looks a little worse in all other browsers. Your call. */
      left:-9999px;
      margin:0;
      padding:0;
      text-align: left;
      text-decoration: none;    
  }
  #nav ul li {
      display: block;    
  }
  #nav li:hover ul {
      left:0;
  }
  #nav li:hover a {
      text-decoration: none;
      background: darkgrey;
  }
  #nav li:hover ul a {
      text-decoration: none;
      background: #B8B8B8;
  }
  #nav li:hover ul a:hover{
      text-decoration: none;
      background: #CCCCCC; 
  }
  #nav ul a{
      white-space: nowrap;
      display: block;
      border-bottom:1px solid #ccc;
      color: white;
      text-decoration: none;
  }
  #nav a {
      text-decoration:none;    
      color: blue;
  }
  #nav a:hover {
      text-decoration:none;
      background: #f1f1f1;
      color: blue;
  }
  /* END HEADER NAV */
  
  
  #sidebar {
      background-color: green;
      width: 150px;
      height: 100%;    
      position: fixed; 
      line-height: 2em;
      font-size: 1.2em;
      z-index: 2;
      text-align: center;
      padding-top: 6%;
      overflow-y: auto;    
  }
  #sidebar a {
      text-decoration: none;  
  }
  #sidebar a:hover {
      background-color: grey;    
  }    
  #content {            
      padding-right: 250px;
      width: 100%;
      padding-top: 100px;    
      font-size: 1.2em;
      line-height: 1.6em;
      z-index: 1;
      text-align: left;
      padding-left: 200px;   
  }    
  #footer {
      position: fixed;
      bottom: 0px;
      height: 40px;
      width: 100%;
      background: #222;
      z-index: 4;
  }
  </code></pre>