Question

我在CSS中实现了一个固定的标头，但出于某种原因，它覆盖了浏览器的滚动条。我不确定为什么会这样做，但似乎我改变的其他一切都无济于事。有什么想法吗？

Scrollbar is covered by the fixed header

的 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

UPDATED FIDDLE

我在你的代码中观察到三件事：

您在标题中提供了100％宽度的填充

给予身体overflow:auto

使用position:absolute代替position:fixed来修复标题

CSS将会：

* {
    margin:0;               /* zero out margin */
    padding:0;              /* zero out padding */
}
html, body {
    height:100%;            /* gives layout 100% height */
    background:#2f3742;
    color: #B8C2CB;
    font-family: Verdana, Geneva, sans-serif;
    font-size: 12px;
}
#wrapper {
    min-height:100%;        /* gives layout 100% height */
    width:600px;            /* centered div must be given a width */
    margin: -30px auto;             /* centers #wrapper */
    background:#47535e;
    border: 1px solid #3D4857;
    border-bottom: 0;

}
* html #wrapper { 
    height:100%;            /* IE6 treats height as min-height */
}
#content {
    margin-top: 100px;
    padding: 5px;
}
p {
    font-size:1.8em;
    text-align:center;
    padding:30px 0 30px;    /* bottom padding clears the #footer */
}
#header {
    height:70px;
    width:600px;            /* centered div must be given a width */
/*  margin: 0 auto -70px; */    /* -80px sucks it back in & auto centers it */
    background-color:#18232f;
    /* background-color:#2F3742; */
    position: absolute;
    top: 0;
    border-bottom: 1px solid #2F3A4A;
}

header {
  height: 70px;
  padding: 0px;
  background: #18232f;
  text-align: center; 
  position: absolute !important;
  width: 100%;
  z-index: 1;
  top:0;
  left:0;
}
.inner-header { padding:20px 25px; }

#footer {
    height:30px;
    width:600px;                /* centered div must be given a width */
    margin: 25px auto 0;            /* -80px sucks it back in & auto centers it */
    background:#2F3742;
    /* bottom: 0; */
    border: 1px solid #3D4857;
    border-top: 1px solid #2F3A4A;
}

HTML：

<header class="clearfix">
    <div class="inner-header">
  test
    </div>
</header>

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

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

Answer 2

简答：滚动条位于您的身体上，因此在您的身体上添加一个margin-top，您的滚动条（以及内容顶部的其余部分将重新出现）。

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

固定页眉覆盖滚动条

2 个答案:

我是怎么做的：