添加菜单高度

Question

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

图片1：

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

注意：

1：菜单和标题已修复。

2：菜单有滚动：自动，所以如果没有空间供子菜单显示，则会创建一个滚动条。

图片2：

如果有足够的内容滚动条显示，页脚将位于底部，菜单应具有窗口的高度 - 标题。 menu = window-header。

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