skipprのスライド画面にnaviをつけたことでスライドが見えなくなる理由

Question

すみません、恥ずかしいくらいの初心者です。

skipprというフリーのテンプレートを使って、fh5co提供のテンプレートと組み合わせてみています。スライド画面が表示されないので原因を探していますが理由がわかりません。

＜状況＞
1.パーツごとでは問題なく動作します
2.naviとskipprを組み合わせた途端に画像が見えなくなります
3.トグルボタンからメニューを表示させると、そのbackgroundにskipprのスライドがみえます（本来の見え方なのでok）
4.トグルのメニューを閉じたり、幅を広げてしまうと見えなくなってしまいます

＜結論＞
cssなど、重なりそうな部分や記述ミスのチェックもしてみましたが全くわかりません。
テスト用にhtmlをアップしてみています。
http://home.j08.itscom.net/kaoriows/test.html

もしかしたら、簡単なつまらないところの問題かもしれませんが、ご教示頂けるようでしたら、どうぞよろしくお願いします。

Comments

[kei344]

「skippr」「fh5co」「navi」について、配布元のURLを質問文に追記してください。

[退会済みユーザー]

すみません、言葉足らずでした。「skippr」の配布先は「http://austenpayan.github.io/skippr/」で、「fh5co」は「https://freehtml5.co/preview/?item=tasty-free-bootstrap-html5-template-for-restaurant-websites」です。naviはfh5coを使用しています。

[kei344]

この「質問への追記・修正の依頼」の部分はデフォルトで表示されませんので、質問本文を編集することをお勧めします。

Answer 1

原因等はわかりませんが、下記のようにすればとりあえず表示されます。何らかの原因で高さが算出できない状態になっているのでしょう。

.skippr {
    min-height: 100vh;
}

Comments

[退会済みユーザー]

すごいです！この部分だけ書き直したら簡単に表示されました。いろいろと試してみたんですがどうしてもわかりませんでした。ありがとうございます。
今度は自分で最初から構築して内容を理解しながら作ってみようと思います。テンプレートは簡単だと思っていましたが、かえって厄介ですね。本当にありがとうございました。