固定位置侧边栏上的粘页脚，想要css解决方案

Question

我使用by Martin Bean and Ryan Fait 提供的粘性页脚技术有一段时间，效果很好，直到我发现自己需要在固定位置的侧边栏上放置一个粘性页脚。

由于固定位置侧边栏对文档是不可见的，因此包装器中的边距和填充设置无效。我试图在侧边栏中添加另一个内部包装器，但也没有帮助。我想知道这个请求是否有任何纯 CSS 解决方案？

我必须使用固定定位侧边栏的原因是我在屏幕尺寸较小时使用过渡效果来折叠它。该方法借鉴于StartBootstrap，example simple-sidebar。

顺便说一句：我正在使用 BS3

我的网站的基本设置是：

HTML

<div id="wrap">   
  <div id="sidebar-wrapper">
    <div id="inner-wrap">
      <ul id="sidebar-nav">
        <li>...</li>
        <li>...</li>
      </ul>
    </div>
    <div id="footer">
      Copyright claim
    </div>  
  </div>
  <div id="main-wrapper">
    Some Content
  </div>
</div>

CSS

html, body {
  height: 100%;
}

#wrap {
    height: 100%;
}

#sidebar-wrapper {
  width: 250px;
  position: fixed;
  min-height: 100%;
  height: auto !important;
  height: 100%;
  padding: 0 auto 50px;
  margin: 0 auto -50px;
}

#inner-wrapper {
  min-height: 100%;
  height: auto !important;
  height: 100%;
  margin: 0 auto -50px;
  padding: 0 auto 50px;
  width: 100%; 
}

#sidebar-nav {
  position: relative;
  top: 0px;
  width: 250px;
  margin: 0px;
  padding: 0px;
}

#footer {
  height: 50px;
  position: absolute;
  width: 250px;
}

我做了一个临时的bootply。希望对您有所帮助。

更新 这个问题被巴斯解决了。非常感谢！上述代码不起作用的原因是由于额外的 'height: auto !important;'在父级#sidebar-wrapper 中设置。删除它，然后一切正常。如果你愿意，你也可以删除 #footer 中的 position:absolute 。

Answer 1

在我看来，您可以在侧边栏上使用额外的包装器来做同样的事情：

html

  <!-- Sidebar -->
  <div id="sidebar-wrapper">
   <div id="sidebar-wrapper-wrapper">     
    <ul class="sidebar-nav">
      <li class="sidebar-brand"><a href="#">Start Bootstrap</a></li>
      <li><a href="#">Dashboard</a></li>
      <li><a href="#">Shortcuts</a></li>
      <li><a href="#">Overview</a></li>
      <li><a href="#">Events</a></li>
      <li><a href="#">About</a></li>
      <li><a href="#">Services</a></li>
      <li><a href="#">Contact</a></li>
    </ul>
  </div>
  <div style="background-color:red;height:60px">footer</div>  

  </div>

css

#sidebar-wrapper-wrapper {
    height: auto !important;
    margin: 0 auto -60px;
    min-height: 100%;
    padding: 0 0 60px;
}