Html css位置固定菜单，具有100%高度和偏移

我想在网站左侧创建一个菜单。主要的想法是youtube是如何做到的：
顶部有一个条形图（固定），高度为40px，宽度为100%。
左边是菜单。您可以使用顶部栏中的按钮打开和关闭它。如果菜单处于打开状态，则菜单固定在左侧，内部有自己的滚动条。菜单为100%高度-40px（从顶部栏中取出）。
当菜单关闭时，内容的宽度为100%，当菜单打开时，内容的宽度为100%。
窗口滚动条仅滚动内容。菜单和顶部栏是固定的

这里有一个小例子：
小提琴也是如此：

<!-- http://jsfiddle.net/zyam1m79/ -->  

但现在我有一个问题，100%的菜单不能从顶部栏中取出40px。因此，内部滚动条可以在窗口外滚动一小部分（到底部）。在菜单文本的末尾有一个“x”，当您滚动到菜单底部时，无法读取它

我怎样才能解决这个问题？我如何将固定元素高度设置为100%，它不采用窗口高度，而是采用更高级别的en元素高度

问候并感谢您的帮助，
Christopher

您可以使用CSS属性计算100%高度减去顶栏。例如：

.main_left {
   height: calc(100% - 40px);
   /* ... */
}

我注意到顶部和底部都有填充物，因此上面的

40px

也需要包含该填充物，因此

calc（100%-120px）。或者添加
框大小：边框框以便填充不会增加容器的高度。
您可以使用CSS属性计算100%高度减去顶部栏。例如：

.main_left {
   height: calc(100% - 40px);
   /* ... */
}

我注意到顶部和底部都有填充物，因此上面的
40px
也需要包含该填充物，因此
calc（100%-120px）。或者添加
框大小：边框框
这样填充不会增加容器的高度。
使用
位置：固定时，请尝试避免使用100%宽度/高度。相反，使用
left:0；右：0
表示100%宽度，顶部：0；底部：0
表示100%高度。请参见下面的示例：


.table{display:table；}/*table*/
.table>*{display:表行；}/*tr*/
.table>*>*{display:table cell；}/*td*/
/*主容器*/
梅因先生{
位置：相对位置；
最小宽度：1024px；
}
/*顶*/
.主ú头{
宽度：100%；
高度：40px；
位置：固定；
左：0；
右：0；
排名：0；
变换：translateZ（0px）；
z指数：199999999；
}
.main_head>div>div{/*all+search*/
边框：1px实心#000；
}
.main_head>div>div:first child{/*菜单*/
边框：1px实心#000；
}
.main_head>div>div:first child>i{
字体大小：40px；
}
.main_head>div>div:last child{/*用户信息*/
宽度：400px；
}
/*容器菜单+内容*/
.main_left_内容{
}
/*左：菜单*/
.梅因左{
宽度：200px；
左：0；
排名：0；
底部：0；
填充顶部：40px；
填充底部：40px；
边框：1px实心#000；
位置：固定；
}
.main_左>div{
位置：绝对位置；
背景色：红色；
顶部：40px；
底部：0；
左：0；
右：0；
溢出y：滚动；
}
/*右：内容*/
.主要内容{
边框：1px实心#000；
垂直对齐：顶部；
}

苏凯
用户信息











































当使用
位置：固定时，尽量避免使用100%宽度/高度。相反，使用
left:0；右：0
表示100%宽度，顶部：0；底部：0
表示100%高度。请参见下面的示例：


.table{display:table；}/*table*/
.table>*{display:表行；}/*tr*/
.table>*>*{display:table cell；}/*td*/
/*主容器*/
梅因先生{
位置：相对位置；