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;    
}