固定标题覆盖滚动条

Question

我在 CSS 中实现了固定标头，但由于某种原因，它覆盖了浏览器的滚动条。我不确定为什么要这样做，但似乎我更改的其他所有内容都没有帮助。任何想法？

• 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

简短回答：滚动条位于您的正文上，因此请在您的正文和滚动条上添加一个顶部边距（连同内容顶部的其余部分将重新出现）。

body {
    margin-top:110px;
}

修复 JSFiddle： http://jsfiddle.net/9CkNC/1/

长答案：请注意，进行此修复后还会出现其他问题。在 CSS 中进行一些小调整可能会很有用，并且我添加了一些注释，它们应该对 JSFiddle 有所帮助。此外，制作静态标题栏是网页设计领域中非常常见的技术，因此有很多关于它的精彩博客文章。我会做一些窥探，看看其他人是如何做到的。

这是一个很好的开始：https://www.youtube.com/watch ?v=3I2Uh-D-lzI

我是怎么做的：

• 如果我想要固定的页眉和页脚，我通常会选择这样的内容：http://jsbin.com/malub/1/edit ?html,css,output
• 如果我只想要一个固定标题，我会这样做：http://jsbin.com/qewak/1/edit ?html,css,output
• 如果我想要固定的页眉和页脚，并且仍然希望滚动条是窗口的高度，我会这样做：http://jsbin.com/zitiqa/1/edit ?html,css,output