javascript - 为菜单添加高度

Question

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

图 1:

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

注意事项:

1:菜单和标题是固定的。

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

图 2:

如果有足够的内容来显示滚动条，页脚将在底部，菜单应该有窗口的高度——页眉。 menu = 窗口标题。

图 3:

当向下滚动时会出现一段页脚，菜单的高度应介于高度和页脚之间。

我用 javascript 编写了一个代码来完成我想要的，但我想知道是否有更好的方法来执行此代码而无需控制滚动、加载和后调整大小来计算菜单的高度。因为如果我添加面包屑或其他东西，它将需要更多计算。

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

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

限制:

需要兼容IE8+。

注意事项:

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

我不想固定菜单的高度，因为每个用户的子菜单都是不同的(有些人比其他人有更多的权限)。

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

如果有人不明白我的问题，我很抱歉，因为英语不是我的主要语言。

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

Answer 1

DEMO

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>

CSS

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;
}