Bootstrap sidebar fullscreen how to remove mobile browser chrome - html

Question

I'm using a modified version of the Bootply (Bootstrap 3.0) example to create a sidebar navigation. In our case we want the navigation not to scroll with the rest of the page, so we created a wrapper to keep it in place. This has the unfortunate side effect of window.scrollTo not to work, since the page size is the same as the screen size. As such, it doesn't hide the browser chrome. I was wondering if anyone had any suggestions on this (removing the browser chrome).
<div class="wrapper clearfix">
<div class="container">
<div class="row row-offcanvas row-offcanvas-left">
<!-- sidebar -->
<div class="column col-sm-3 col-lg-2 col-xs-6 sidebar-offcanvas clearfix" id="sidebar" role="navigation">
<ul>
<li>Menu item</li>
<li>Menu item</li>
</ul>
</div>
<!-- main right col -->
<div class="col-sm-9 col-lg-10 col-xs-12" id="main-mobile">
<!-- top menu -->
<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>
<div class="text-center top-buttons">
<ul>
<li>Topmenu</li>
<li>Topmenu</li>
</ul>
</div>
</div>
</div>
</div>
<!-- main content -->
<div class="row navbar-top-padding" name="top">
<div class="col-md-12 page" id="col3">
<!--scrollable content here-->
</div>
</div>
</div>
</div>
</div>
</div>
The relevant CSS is here. I've removed styling etc. The relevant element is the absolutely positioned container as this basically sets the page size to the screen size.
LESS
#main-mobile{
height:100%;
overflow-y: scroll;
-webkit-overflow-scrolling: touch;
overflow-x:hidden;
> .row{
height: 100%;
}
}
.container{
width:100%;
}
.wrapper{
height:100%;
> .container{
position:absolute;
top:0;
left:0;
right:0;
bottom:0;
}
}
.row-offcanvas{
height:100%;
}
.sidebar-offcanvas{
padding:0px;
height:100%;
}
#media screen and (max-width: #screen-xs-max) {
.row-offcanvas {
position: relative;
transition: all .2s ease-out;
left:0;//necessary to make the animation work
}
.sidebar-offcanvas {
position: absolute;
top: 0;
}
}