ここを見ると、右側にスクロールバーがあると、本来全身を埋めるはずの左側のサイドバーが下に隙間を作っていることが分かります。
**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 も使用できます。
乾杯