2

我使用了一段时间Martin Bean 和 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;
}

我做了一个临时引导。希望能帮助到你。

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

4

1 回答 1

0

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

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;
}
于 2013-10-21T21:03:14.477 回答