css 高度和偏移量为 100% 的位置固定菜单

Question

我想在网站左侧创建一个菜单。主要思想是 youtube 是如何制作它的：
你在顶部有一个栏（固定）并且总是 40px 高度和 100% 宽度。
在左边你有菜单。您可以使用顶部栏中的按钮打开和关闭它。如果菜单打开，则菜单固定在左侧，内部有自己的滚动条。菜单为100% height-40px（从顶栏撤回）。
当菜单关闭时，内容的宽度为 100%，当菜单打开时，内容的宽度为 100%-菜单宽度。
window 滚动条只滚动内容。菜单和顶部栏是固定的。

这是一个小例子：http://output.jsbin.com/gehatitaxe
在 fiddle 中也一样：

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

但现在我遇到了问题，100%的菜单无法从顶部栏中撤回40px。所以内部滚动条可以滚动出 window 一点点（到底部）。在菜单文本的末尾有一个 "x" ，当您全部滚动到菜单底部时无法阅读它。

我该如何解决这个问题？如何将固定元素高度设置为 100%，并且它不采用 window 高度，而是采用更高级别的 en 元素的高度？

问候并感谢您的帮助，
克里斯托弗

Answer 1

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

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

我注意到你在顶部和底部有填充，所以上面的 40px 也需要包括它，因此 calc(100% - 120px);。要么，要么添加 box-sizing: border-box; 这样填充就不会增加容器的高度。

Answer 2

使用position: fixed时，尽量避免使用 100% 宽度/高度。相反，使用 left: 0; right: 0 表示 100% 宽度，使用 top: 0; bottom: 0 表示 100% 高度。请参阅以下示例：

    .table { display: table; } /* table */
    .table > * { display: table-row; } /* tr */
    .table > * > * { display: table-cell; } /* td */

/* main container */
.main{
    position: relative;
    min-width: 1024px;
}

/* top */
.main_head{
    width: 100%;
    height: 40px;
    position: fixed;
    left: 0;
    right: 0;
    top: 0;
    transform: translateZ(0px);
    z-index: 1999999999;
}
.main_head > div > div{ /* all + search */
    border: 1px solid #000;
}
.main_head > div > div:first-child{ /* menu */
    border: 1px solid #000;
}
.main_head > div > div:first-child > i{
    font-size: 40px;
}
.main_head > div > div:last-child{ /* User information */
    width: 400px;
}

/* Container menu + content */
.main_left_content{
    
}

/* left: menu */
.main_left{
    width: 200px;
    left: 0;
    top: 0;
    bottom: 0;
    padding-top: 40px;
    padding-bottom: 40px;
    border: 1px solid #000;
    position: fixed;
}
.main_left > div{
    position: absolute;
    background-color: red;
    top: 40px;
    bottom: 0;
    left: 0;
    right: 0;
    overflow-y: scroll;
}

/* right: content */
.main_content{
    border: 1px solid #000;
    vertical-align: top;
}

<div class="main">
                        <div class="main_head table">
                            <div>
                                <div>
                                    <i class="fa fa-bars fa-lg"></i>
                                </div>
                                <div>Suche</div>
                                <div>User Information</div>
                            </div>
                        </div>
                        <div class="main_left_content table">
                            <div>
                                <div class="main_left">
                                    <div>
                                    <div>
                                        Menü<br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br />x
                                    </div>
                                    </div>
                                </div>
                                <div class="main_content">
                                    Content<br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br />x
                                </div>
                            </div>
                        </div>
                    </div>

css 高度和偏移量为 100% 的位置固定菜单

css position fixed menu with 100% height and offset

html

css

fixed