可滚动导航，100％div高度

Question

我正在使用bootstrap，我的页面左侧有一个span2用作导航。导航内部是一个项目列表。我希望导航可以滚动。我也希望导航能够占用页面的剩余高度。

我不想绝对定位导航，我希望它保持span2（bootstrap），这样当屏幕宽度减小时它会流向页面顶部。

<div class="row-fluid">
    <div class="span12" style="height: 150px;">
        Some Top level content
    </div>
    <div class="row-fluid">
    <div class="span2">
        Here is my nav
<div id="navigation" class="scroll">
        <div id="menu">
            <ul>
                <li><a href="">Link</a></li>
                <li><a href="">Link</a></li>

*{
    margin:0px;padding:0px;
}
html,body{
    width:100%;
    height:100%;
    font-family: Arimo, sans-serif;
}

a { color: #fff; }

.scroll {
    overflow-y: scroll;
    height: 100vh;
}

有没有办法告诉css中的div占用页面的剩余高度，然后在其中滚动？

这是一个小提琴，试图更好地解释我想要解决的问题。您会注意到页面随导航滚动。我希望只有导航滚动。

http://jsfiddle.net/newmanw/fbskugp7/1/

Answer 1

尝试：

高度：计算（100％ - XXpx）;

当XX是页面其他元素的高度时。