Bootply：offcanvas行高100％

Question

我正在尝试使用offcanvas行为移动设备创建一个滑入式侧边菜单。

我希望菜单具有固定的位置，以便在小屏幕和大屏幕中占据屏幕的整个长度。使用位置有点棘手：固定因为当我这样做时整个结构似乎崩溃了。我使用以下结构

<div class="container">
    <div class="row row-offcanvas row-offcanvas-left">
        <!-- sidebar -->
        <div class="col-sm-3 col-lg-2 col-xs-6 sidebar-offcanvas" id="sidebar" role="navigation">
             <!-- menu left content -->
        </div>

        <!-- main right col -->
        <div class="col-sm-9 col-lg-10 col-xs-12" id="main">

           <div class="navbar navbar-inverse navbar-main navbar-static-top collapse-group" role="navigation" id="mobile-main-nav">
               <div class="collapse in no-ani">
                    <div class="nav-buttons">
                        <button type="button" class="btn btn-success icn-only visible-xs pull-left offcanvas-toggle" data-toggle="offcanvas"><i class="icon-th"></i></button>
                        <!--- top menu content --->
                    </div>
                </div>
            </div>

            <div class="row navbar-top-padding">
                <div class="col-md-12 page" id="col3">

                <!--- main content --->
                </div>
            </div>
        </div>          
    </div>
</div>

使用以下LESS样式

    @media screen and (max-width: @screen-xs-max) {

        /*
         * Off Canvas
         * --------------------------------------------------
         */
        .row-offcanvas {
            position: relative;
            -webkit-transition: all .2s ease-out;
            -moz-transition: all .2s ease-out;
            transition: all .2s ease-out;
            left:0;//necessary to make the animation work

        }

        .row-offcanvas-right .sidebar-offcanvas {
            right: -87%; /* 6 columns */
        }

        .row-offcanvas-left .sidebar-offcanvas {
            left: -87%; /* 6 columns */
        }

        .row-offcanvas-right.active {
            right: 87%; /* 6 columns */
        }

        .row-offcanvas-left.active {
            left: 87%; /* 6 columns */
        }

        .sidebar-offcanvas {
            position: absolute;
            top: 0;
            width: 87%; /* 6 columns */
        }

    }