Question

我使用粘性页脚技术by Martin Bean and Ryan Fait暂时使用，工作正常，直到我发现自己需要将粘性页脚放在固定位置侧边栏上。

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

我必须使用固定定位侧边栏的原因是我使用过渡效果在屏幕尺寸较小时折叠它。该方法是从StartBootstrap中学习的，例如simple-sidebar。

BTW：我正在使用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。希望它有所帮助。

更新 Bass解决了这个问题。非常感谢！上述代码无效的原因是由于额外的高度：auto！important;＆＃39;设置在父＃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;
}

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

1 个答案: