Fixed Header Overlaying Scrollbar

Question

I have a fixed header implemented in my CSS but for some reason, it's overlaying the browser's scroll bar. I'm not sure why it's doing this but it seems like everything else I change doesn't help. Any idea?

• http://jsfiddle.net/HjBhW/

HTML:

<header class="clearfix">
  test
</header>

<div id="wrapper">
  <div id="content">
      Content
  </div><!-- end #content --> 
</div><!-- end #wrapper -->

<div id="footer">
          <center>footer</center>
</div>

CSS:

<style type="text/css">
* {
  margin:0;               
  padding:0;              
}
html, body {
  height:100%;            

  overflow:auto;      
  background:#2f3742;
  color: #B8C2CB;
}
#wrapper {
  min-height:100%;    
  width:600px;        
  margin: -30px auto;     
  background:#47535e;
  border: 1px solid #3D4857;
  border-bottom: 0;

}
* html #wrapper { 
  height:100%;        
}
#content {
  margin-top: 100px;
  padding: 5px;
}
header {
  height: 70px;
  padding: 22px 25px;
  background: #18232f;
  text-align: center; 
  position: absolute !important;
  width: 100%;
  z-index: 1;
  top:0;
  left:0; 
}
#footer {
  height:30px;
  width:600px; 
  margin: 25px auto 0;
  background:#2F3742;
  border: 1px solid #3D4857;
  border-top: 1px solid #2F3A4A;
}
</style>

Answer 1

Short Answer: the scrollbar is on your body, so add a margin-top to your body and your scrollbar (along with the rest of the top of your content will reappear).

body {
    margin-top:110px;
}

Fixed JSFiddle: http://jsfiddle.net/9CkNC/1/

Long Answer: Note that other problems arise after this fix is made. There are a bunch of little tweaks that might be useful to make in your CSS, and I've added a bunch of comments that should help a little in the JSFiddle. Also, making a static header bar is a very common technique in the web design world, so there are a lot of great blog posts about it. I would do some snooping to see how other people have done it.

This is a great one to start with: https://www.youtube.com/watch?v=3I2Uh-D-lzI

How I do it:

• If I want a fixed header and footer, I usually go with something like this: http://jsbin.com/malub/1/edit?html,css,output
• If I want only a fixed header, I do something like this: http://jsbin.com/qewak/1/edit?html,css,output
• If I want a fixed header and footer and I still want the scrollbar to be the height of the window, I'll do this: http://jsbin.com/zitiqa/1/edit?html,css,output