CSS固定元素显示在滚动条

Question

我已经看到了一些有关同一问题的问题，但没有一个指定的答案实际上适用于这个问题。

请考虑以下代码段：

＆＃13;

＆＃13;

$(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');
  });
});

＆＃13;

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;
}

＆＃13;

<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>

＆＃13;

＆＃13;

＆＃13;

滚动条位于nav和footer下方。由于非常重要仅 container元素滚动（BODY元素必须不滚动），我能解决这个问题吗？有可能吗？

HTML结构应基本上与此问题中建议的一致（固定导航，全高内容等）。我尝试了几个技巧;修改z-index es，包装东西等等，我迷失在这里。

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

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;
}

Answer 2

请参阅此fiddle

从overflow:auto删除#container。

#container的 CSS 就像

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

<强>更新

将overflow:auto添加到#content。

Answer 3

http://jsfiddle.net/a8xqhh3L/

从overflow: auto删除#container。