html - 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 占据页面的剩余高度，然后在其中滚动？

这是一个试图更好地解释我试图解决的问题的 fiddle 。您会注意到页面随导航一起滚动。我只想滚动导航。

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

Answer 1

尝试:

高度:计算(100% - XXpx);

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