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

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。