• 解決済 9-taro

    (@9-taro)


    お世話になります。
    下記のページのコードを使って、swiperのスライダーを全画面表示させたいと思っております。
    これを自分のページに配置した際(非公開)、height: 100vh;を指定しても、スライダーの高さが30pxくらい増えてしまいます。どの部分を疑えばいいでしょうか?
    よろしくお願いいたします。

    https://yumegori.com/background_fade20190212

    以下 css
    .swiper-wrapper .swiper-slide {
    background-position: center center;
    background-size: cover;
    background-repeat: no-repeat;
    height: 100vh; //全画面表示
    overflow: hidden;
    -webkit-backface-visibility: hidden;
    backface-visibility: hidden;
    }

2件の返信を表示中 - 1 - 2件目 (全2件中)
  • moyo55

    (@moyo55)

    vh はスマホからのアクセス時にアドレスバー等の高さの分だけズレる仕様になっているので、その影響ではないでしょうか。

    【参考リンク】
    【CSS】100vhは「一画面」ではないという罠
    スマホで100vhを使うと、アドレスバーの高さ分はみでてしまう

    もし 100vh が原因の場合はJavaScriptで高さ計算をする方法が解決策になると思います。
    解説しているサイトは結構ありますので「vh Javascript」などの単語で検索してみてください。

    トピック投稿者 9-taro

    (@9-taro)

    moyo55 様

    夜分にご回答ありがとうございます。

    height: calc(100vh – 100px);で対処できましたが、
    java scriptsの件、調べてみます。
    ご親切にありがとうございます!

2件の返信を表示中 - 1 - 2件目 (全2件中)

トピック「100vhで高さが画面いっぱいにならない場合」には新たに返信することはできません。