带有bootstrap 100％高度问题的动画折叠菜单

Question

我正在使用bootstrap 3来构建带有切换汉堡按钮的侧面导航。基本上我给了正常的条形宽度，然后使用 .collapse，.collapsing .collapse.in 这两个类，因为这些是切换菜单的三种不同状态。我的目标是让酒吧以稳定的运动崩溃，现在发生的事情是菜单打开，直到内容结束。在内容的最后，它打破了。酒吧的高度是窗户大小的100％，固定在左侧，宽度约为400px。我尝试使用绝对位置和底部0将内容添加到导航栏的底部，但没有运气。

由于

nav ul {
    width: 245px;
}
.collapsing {
    position: fixed;
    z-index: 1000;
    background: #ba2625;
    top: 0;
    bottom: 0;
    box-shadow: 4px 6px 6px black;
}
.navbar-collapse.collapse {
    display: none!important;
    height: 100% ;
    top: 0;
    bottom: 0;
}
.collapse.in {
    position: fixed;
    z-index: 1000;
    display: block!important;
    background: #ba2625;
    top: 0;
    bottom: 0;
    box-shadow: 4px 6px 6px black;
}