Javascript 为菜单添加高度

我需要一个菜单，有显示区域的高度，下面的图像是为了更好地理解

图1：

如果没有足够的内容显示滚动条，菜单的高度应该在页眉和页脚之间

注:

1：菜单和标题是固定的

2：菜单有scroll:auto，因此如果没有空间显示子菜单，将创建一个滚动条

图2：

如果有足够的内容显示滚动条，则页脚将位于底部，菜单的高度应与窗口页眉的高度相同。菜单=窗口标题

图3：

当向下滚动一段页脚时，菜单的高度应在页脚高度和页脚高度之间

我用javascript编写了一段代码，实现了我的愿望，但我想知道是否有更好的方法来编写这段代码，而无需控制滚动、加载和调整大小来计算菜单的高度。因为如果我加上面包屑什么的，它需要更多的计算

要添加内容以查看我想要的内容，只需按下按钮，向下滚动时，您将看到调整其高度的菜单。要打开菜单，只需单击标题处的按钮

`http://jsfiddle.net/gk5fL1nr/4/`

限制：

需要与IE8+兼容

注:

我不想要相等的高度，因为我不知道内容的高度，所以它可能比预期的要大

我不想固定菜单的高度，因为每个用户的子菜单都是不同的（有些用户比其他用户拥有更多的特权）

有人知道为什么在添加一些上下文（不是那么多）并向下滚动时会出现错误，它会返回顶部（因为固定选项），生成一个无限循环

对不起，如果有人不明白我的问题，因为英语不是我的主要语言

TL；DR–我只需要与css链接中相同的资源。

html

---

不完全是我想要的，如果菜单中有更多的子菜单，它将显示在页脚上。不，它不会。。试试看。

<header>this header is fixed</header>
<section>
    <div class="left">menu</div>
    <div class="right">scrollable
        <br/>scrollable
        <br/>scrollable
        <br/>scrollable
        <br/>scrollable
        <br/>scrollable
        <br/>scrollable
        <br/>scrollable
        <br/>scrollable
        <br/>scrollable
        <br/>scrollable
        <br/>scrollable
        <br/>scrollable
        <br/>scrollable
        <br/>scrollable
        <br/>scrollable
        <br/>scrollable
        <br/>scrollable
        <br/>scrollable
        <br/>scrollable
        <br/>scrollable
        <br/>scrollable
        <br/>scrollable
        <br/>scrollable
        <br/>scrollable
        <br/>scrollable
        <br/>scrollable
        <br/>scrollable
        <br/>
    </div>
</section>
<footer>this is fixed footer</footer>

header, footer {
    background:rgba(255, 0, 0, 0.5);
    position: fixed;
    height: 40px;
    left: 0;
    right: 0;
    line-height: 40px;
    text-align: center;
}
header {
    top:0;
}
footer {
    bottom:0;
}
section {
    top: 40px;
    bottom: 40px;
    box-sizing: border-box;
    background: #666;
    position: absolute;
    left: 0;
    right: 0;
    width: 100%;
}
body, html {
    position: relative;
    height: 100%;
    margin:0;
    padding:0;
}
.left, .right {
    position:absolute;
    font-size: 20px;
    height: 100%;
}
.right {
    background: #aaa;
    right: 0;
    top: 0;
    bottom:0;
    left:100px;
    overflow:auto;
}
.left {
    width: 100px;
    left: 0;
}