意图
我正在使用CSS和JavaScript使用一个侧边栏转换菜单。 侧边栏菜单按预期工作。 我想要一个在屏幕左侧并在触发菜单时移动的侧边栏菜单。想法是拥有一个100像素宽、高度为100％且始终在屏幕左侧的菜单触发器。 使用绝对位置会导致在所有浏览器中出现高度问题，使用固定位置在Firefox上运行正常，但遇到下面提到的问题。
错误
Firefox问题：就我所知，没有任何问题。
Chrome问题：向下滚动几个像素后，侧边栏菜单触发器不会延伸到整个页面。
Internet Explorer：侧边栏似乎完全消失，当侧边栏菜单被触发时。
jsFiddle
因为我的代码涉及HTML、CSS和JavaScript，所以我包含了一个jsFiddle。请注意，据我所知，问题仅出现在Chrome和Internet Explorer上。您可以通过向下滚动页面一点并单击左侧菜单按钮来复制问题。
截图
值得注意的HTML代码（完整代码在Fiddle中）
<div id="sbContainer" class="sbContainer">
<div class="sbPush">
<header class="contain-to-grid sbMenu sbFX">
<nav class="top-bar" data-topbar>
<ul class="title-area show-for-small-only"><!--SITENAME--></ul>
<section class="top-bar-section"><!--LINKS--></section>
</nav>
</header>
<div class="sbContent-one">
<div class="sbContent-two">
<div class="sbMenuTrigger" data-effect="sbFX"><!--SIDEBAR TRIGGER--></div>
<div class="sbMainContent" role="document"><!--PAGE CONTENT--></div>
</div>
</div>
</div>
</div>
值得注意的CSS代码（完整代码在Fiddle中）
html, body, .sbContainer, .sbPush, .sbContent-one {
height:100%
}
.sbContent-one {
overflow-x:hidden;
background:#fff;
position:relative
}
.sbContainer {
position:relative;
overflow:hidden
}
.sbPush {
position:relative;
left:0;
z-index:99;
height:100%;
-webkit-transition:-webkit-transform .5s;
transition:transform .5s
}
.sbPush::after {
position:absolute;
top:0;
right:0;
width:0;
height:0;
background:rgba(0,0,0,0.2);
content:'';
opacity:0;
-webkit-transition:opacity 0.5s,width .1s 0.5s,height .1s .5s;
transition:opacity 0.5s,width .1s 0.5s,height .1s .5s
}
.sbMenu-open .sbPush::after {
width:100%;
height:100%;
opacity:1;
-webkit-transition:opacity .5s;
transition:opacity .5s
}
.sbMenu {
position:absolute;
top:0;
left:0;
z-index:100;
visibility:hidden;
width:244px;
height:100%;
background:#872734;
-webkit-transition:all .5s;
transition:all .5s
}
.sbMenu::after {
position:absolute;
top:0;
right:0;
width:100%;
height:100%;
background:rgba(0,0,0,0.2);
content:'';
opacity:1;
-webkit-transition:opacity .5s;
transition:opacity .5s
}
.sbMenu-open .sbMenu::after {
width:0;
height:0;
opacity:0;
-webkit-transition:opacity 0.5s,width .1s 0.5s,height .1s .5s;
transition:opacity 0.5s,width .1s 0.5s,height .1s .5s
}
.sbFX.sbMenu-open .sbPush {
-webkit-transform:translate3d(300px,0,0);
transform:translate3d(244px,0,0)
}
.sbFX.sbMenu {
-webkit-transform:translate3d(-100%,0,0);
transform:translate3d(-100%,0,0)
}
.sbFX.sbMenu-open .sbFX.sbMenu {
visibility:visible;
-webkit-transition:-webkit-transform .5s;
transition:transform .5s
}
.sbFX.sbMenu::after {
display:none
}
.no-csstransforms3d .sbPush,.no-js .sbPush {
padding-left:244px
}
.sbMenuTrigger {
background-color:#b23445;
cursor:pointer;
height:100%;
width:100px;
position:fixed;
left:0;
top:0
}
.sbMainContent {
margin-left:100px;
width:calc(100% - 100px);
top:0;
padding-top:50px;
position:absolute;
height:100%
}