title: Sticky footer on fixed position sidebar, want css solution
body: <p>I used the technique of sticky footer provided <a href="http://getbootstrap.com/examples/sticky-footer/" rel="nofollow">by Martin Bean and Ryan Fait</a> for a while, works fine until I find myself needs to put a sticky footer on a fixed position sidebar.  </p>
  
  <p>Since fixed position sidebar is invisible to the document, the setting of margin and padding in the wrapper has no effect.  I tried to add another inner-wrapper inside the sidebar but also not helping.  I would like to know if there's any pure CSS solution for this request? </p>
  
  <p>The reason I have to use fixed positioning sidebar is I use transitioning effect to collapse it when screen size is small.  The method is learned from StartBootstrap, example simple-sidebar.</p>
  
  <p>BTW:  I'm using BS3</p>
  
  <p>The basic set up of my site is:</p>
  
  <p><strong>HTML</strong></p>
  
  <pre><code>&lt;div id="wrap"&gt;   
    &lt;div id="sidebar-wrapper"&gt;
      &lt;div id="inner-wrap"&gt;
        &lt;ul id="sidebar-nav"&gt;
          &lt;li&gt;...&lt;/li&gt;
          &lt;li&gt;...&lt;/li&gt;
        &lt;/ul&gt;
      &lt;/div&gt;
      &lt;div id="footer"&gt;
        Copyright claim
      &lt;/div&gt;  
    &lt;/div&gt;
    &lt;div id="main-wrapper"&gt;
      Some Content
    &lt;/div&gt;
  &lt;/div&gt;
  </code></pre>
  
  <p><strong>CSS</strong></p>
  
  <pre><code>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;
  }
  </code></pre>
  
  <p>I made a temp <a href="http://bootply.com/89202" rel="nofollow">bootply</a>.  Hope it helps.</p>
  
  <p><strong>UPDATE</strong>
  The problem is solved by Bass. Thanks a lot!  The cause of the above code not working is due to the extra 'height: auto !important;' set in the parent #sidebar-wrapper.  Delete it then everything works fine.  If you like, you can also delete the position:absolute in #footer as well.  </p>