Min height 100% sidebar - creates a gap below when scrolling

[kirksquid]

If you look here, you can see that if there's a scrollbar on the right, the sidebar on the left, which is supposed to fill the whole body creates a gap at the bottom. \[code\]**CSS**html, body { height: 100%; min-height: 100%;}.wrapper { width: 960px; margin: 0 auto; position: relative;}.sidebar { background: black; width: 260px; float: left; height: auto !important;}.wrapper, .sidebar { height: 100%; min-height: 100%; }.content { float: left; margin-top: 15%; width: 700px;}footer { float: left; padding: 15px 0; width: 700px; text-align: center; }?**HTML** <div class="wrapper"> <div class="sidebar"> <nav> <ul> <li><a href="http://stackoverflow.com/questions/13838737/#">Menu</a></li> <li><a href="http://stackoverflow.com/questions/13838737/#">Menu</a></li> <li><a href="http://stackoverflow.com/questions/13838737/#">Menu</a></li> <li><a href="http://stackoverflow.com/questions/13838737/#">Menu</a></li> <li><a href="http://stackoverflow.com/questions/13838737/#">Menu</a></li> </ul> </nav> </div> <div class="content"> <p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Praesent ac ligula congue felis accumsan scelerisque sed eu risus. Nulla sed leo velit. Sed at commodo orci. Nam vitae varius risus. Vestibulum facilisis tortor aliquam orci rutrum vestibulum. Cras tincidunt pretium mauris non tristique. Vestibulum et justo tortor, at facilisis erat.</p> <footer> <p>FOOTER</p> </footer> </div> </div>?\[/code\]http://jsfiddle.net/5YHX7/567/I've realised that the 100% height does still work, but it seems to fill the window and not keep going to fill the content.I could use the faux columns technique but ideally I'd like to resolve this in css.Cheers