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

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%。然后，如果你没有导航栏，还有sidebarto height: 100%。

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

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