如何将侧边栏扩展到页面的整个高度？

Question

jsFiddle

<div id="wrapper" class="container-fluid">
    <div class="row-fluid">
        <div class="span12">
            <div class="span2 sidebar">sidebar</div>
            <div class="span10 content">content</div>
        </div>
    </div>
</div>

过去几个小时我一直在寻找谷歌寻找解决方案。我认为我不能Faux Columns，因为该站点是基于Bootstrap构建的，因此侧栏宽度将根据浏览器的宽度而变化。

Answer 1

您必须先将html和body都设置为height: 100%。然后，如果您没有导航栏，还需要sidebar到height: 100%。

如果您使用的是非固定导航栏，则必须使用absolute定位。

绝对定位无论如何都是解决这个问题的另一种方法。将body和html的高度设置为100％后，将bottom: 0和top: 0与position: absolute一起设置。并且您必须知道absolute定位是相对于具有position: relative的关闭父级计算的。