Sticky footer on fixed position sidebar, want css solution - html

Question

I used the technique of sticky footer provided by Martin Bean and Ryan Fait for a while, works fine until I find myself needs to put a sticky footer on a fixed position sidebar.
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?
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.
BTW: I'm using BS3
The basic set up of my site is:
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;
}
I made a temp bootply. Hope it helps.
UPDATE
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.

Answer 1

I seems to me you can do the same with an extra wrapper on your sidebar:
html
<!-- Sidebar -->
<div id="sidebar-wrapper">
<div id="sidebar-wrapper-wrapper">
<ul class="sidebar-nav">
<li class="sidebar-brand">Start Bootstrap</li>
<li>Dashboard</li>
<li>Shortcuts</li>
<li>Overview</li>
<li>Events</li>
<li>About</li>
<li>Services</li>
<li>Contact</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;
}