jquery - 侧边栏最小高度 100% - 滚动时在下方创建间隙

Question

如果你看这里，你会发现如果右边有一个滚动条，左边的侧边栏应该填充整个主体，但会在底部产生一个间隙。

**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="#">Menu</a></li>
                        <li><a href="#">Menu</a></li>
                        <li><a href="#">Menu</a></li>
                        <li><a href="#">Menu</a></li>
                        <li><a href="#">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>​

http://jsfiddle.net/5YHX7/567/

以及所发生情况的屏幕截图

我希望黑色继续沿着页面延伸到内容的底部。

我意识到 100% 高度仍然有效，但它似乎填充了窗口，而不是继续填充内容。

我可以使用假列技术，但理想情况下我想在 css 中解决这个问题，并且我也愿意使用 jquery。

干杯

Answer 1

http://jsfiddle.net/5YHX7/578/检查这个例子。您需要固定侧边栏并将一些元素 float 到右侧。希望有帮助。

突出显示的 CSS 更改:

 .sidebar {
  background: black;
  width: 260px;
  float: left;
  height: auto !important;
  position:fixed;
 }

 .content {
  float: right;
  margin-top: 15%;
  width: 700px;
 }


 footer {
  float: right;
  padding: 15px 0;
  width: 700px;
  text-align: center;    
}