Javascript 大小灵活的私人菜单

我正在写一个使用引导类的站点。我设计了一个菜单，可以从屏幕右侧滑出，涵盖所有内容。我希望菜单自动成为屏幕的高度，并且是col-xs-2。这是我尝试的，但是菜单打开覆盖整个页面，当然，高度是300px，而不是屏幕的高度：

HTML

<div class = "row">
    <div class = "col-xs-10">
        <a id="menuTrigger" class="dropdown-toggle" data-toggle = "dropdown">Menu</a>
    </div>
    <div class = "col-xs-2">
        <div id="myMenu">
           <div id="item1" class="submenu">Item 1</div>
           <div id="item2" class="submenu">Item 2</div>
           <div id="item3" class="submenu">Item 3</div>
        </div>
    </div>
</div>

CSS

#myMenu  { position:fixed; 
           top:20px; 
           right:-100%; 
           width:100%; 
           height:300px; 
           background:palegreen;}
.submenu{width:100%;height:20px;padding:20px 5px;border:1px solid green;}
#menuTrigger:hover{cursor:pointer;}

你试过mmenu吗

我就是这么用的。请注意，手机上的浏览器（尤其是chrome浏览器）由于某些原因（可能已经更新）无法正确执行子菜单

#myMenu  { position:fixed; 
           top:20px; 
           right:-100%; 
           width:100%; 
           height:300px; 
           background:palegreen;}
.submenu{width:100%;height:20px;padding:20px 5px;border:1px solid green;}
#menuTrigger:hover{cursor:pointer;}