slidebars.js[ver2.0.2] を使ってヘッダー部分を固定表示し、ドロワーメニューを実装した時にスクロールバーが隠れて高さがうまく表示しなかったときの対策メモ

ドロワーのcssをpositionとz-indexで調整すると上部分（スクロールバー）がヘッダーに隠れてしまう （下のコードのようにhtmlとcssを指定した状態）

<header id="header" class="container-header">
ヘッダー
</header>
 
<div class="page" canvas="container">
コンテンツ
</div>
 
<nav class="slidebars-menu" off-canvas="id-slidebars right push">
ドロワーメニュー
</nav>

CSS

.container-header{
width: 100%;
height: 100px;
position: fixed;
}
.header{
width: 100%;
height: 100px;
position: fixed;
z-index: 3;
}
.slidebars-menu {
z-index: 2;
/*[off-canvas]でposition: fixed;が指定されてます*/
}
.page{
position: relative;
z-index: 0;
}

ドロワーのcssをmargin-topでずらすと、画面下部分のコンテンツが切れる

ドロワーの上部分がヘッダーで隠れてしまうので、margin-topを使ってやるとメニューの下が切れてしまう。

.container-header{
width: 100%;
height: 100px;
position: fixed;
}
.page{
margin-top: 100px;
}
.slidebars-menu {
background-color: #999;
margin-top: 100px;
}

図にするとこんな感じ slidebars.jpg

解決策は公式サイトのcssにありました。

[canvas=container]{
    height: calc( 100% - ＜ヘッダーのheight＞ );
}

まとめるとこんな感じ

.container-header{
    width: 100%;
    height: 100px;
    position: fixed;
}
[canvas=container]{
    height: calc( 100% - 100px );
}
.page{
    margin-top: 100px;
}
.slidebars-menu {
    height: calc( 100% - 100px );
    margin-top: 100px;
}

公式サイトでドキュメントを探しましたが、見つけきれませんでした。 ですが、公式サイトのナビ部分はこの方法を使っていたのでそれを見て解決できました。