html - CSS 固定元素出现在滚动条上

Question

我看到了一些关于相同问题的问题，但指定的答案都不适用于这个问题。

考虑以下片段:

$(function () {
  $(window).on('scroll', function () {
    /**
      THIS SHOULD NOT BE CALLED!!!
      So, change some colors to warn about it, if it happens.
    */
    $('#content').css('background-color', 'red');
  });
});

body {
  margin:0;
  padding:0;
    
  height: 100%;
  width: 100%;
}

#container {
  position: absolute;
    
  height: 100%;
  width: 100%;
  z-index: 9999999;
    
  overflow: auto;
}

#nav {
  background-color:rgb(50,50,50);
  color: white;

  position: fixed;
  left: 0;
  top: 0;
  
  width: 100%;
  height: 30px;
  padding-top: 10px;
  z-index: 100;
}

#content-wrapper {
  background-color:rgb(200,200,200);

  min-height: 100%;
  height: auto !important;
  width: 100%;
  z-index:2;
}

#content {
  padding-top: 40px;
  padding-bottom: 40px;
}

#footer {
  background-color: rgb(220, 220, 240);
  
  position: fixed; 
  left: 0;
  bottom: 0;

  height: 30px;
  width: 100%;
  padding-top: 10px;
  z-index: 9999;
}

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>

<div id="container">
  <div id="nav">
    Navbar
  </div>
    
  <div id="content-wrapper">
    <div id="content">
      <div>
        Begin
      </div>
      <div style="height: 600px;">
        ...
      </div>
      <div>
        End
      </div>
    </div>
  </div>
    
  <div id="footer">
    Footer
  </div>
</div>

滚动条位于 nav 和 footer 下方。因为这非常很重要，只有 container 元素滚动(BODY 元素必须不 strong> 滚动)，我该如何解决这个问题？可能吗？

HTML 结构基本上应该如本问题中所建议的那样(固定导航、全高内容等)。我尝试了几种技巧；修改 z-indexes、包装东西等，我在这里迷路了。

目标浏览器是 Google Chrome，因为这是该应用程序使用的采用的浏览器。理想的解决方案是使固定元素调整其宽度以补偿 container 元素上的 overflow: auto;。

Answer 1

演示在此 fiddle

此处的另一种方法是仅滚动示例中的#content-wrapper。这是如何完成此操作的基本示例:

HTML

<div id="container">
    <div id="nav">
        Navbar
    </div>

    <div id="content-wrapper">
        <div id="content">
            <div>
                Begin
            </div>
            <div style="height: 600px;">
                ...
            </div>
            <div>
                End
            </div>
        </div>
    </div>

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

CSS

body {
    margin:0;
    padding:0;
    height: 100%;
    width: 100%;
}

#container {
    position: absolute;
    height: 100%;
    width: 100%;
    overflow: hidden;
}

#nav {
    background-color:rgb(50,50,50);
    color: white;
    position: fixed;
    left: 0;
    top: 0;
    width: 100%;
    height: 30px;
    padding-top: 10px;
}

#content-wrapper {
    position:absolute;
    top:40px;
    bottom:40px;
    left:0;
    right:0;
    background-color:rgb(200,200,200);
    width: 100%;
    overflow:scroll;

}

#footer {
    background-color: rgb(220, 220, 240);
    position: fixed; 
    left: 0;
    bottom: 0;
    height: 30px;
    width: 100%;
    padding-top: 10px;
}