Bootply: offcanvas row hight 100% - twitter-bootstrap-3

Question

I'm trying to use the offcanvas row to create a slide-in side menu for a mobile device.
I would like the menu to have a fixed position so that it will occupy the entire length of the screen in both small and larger screens. It's a bit tricky to play with position:fixed because the whole structure seems to fall apart when I do so. I use the following structure
<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>
With the following LESS styles
#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 */
}
}