質問をすることでしか得られない、回答やアドバイスがある。

15分調べてもわからないことは、質問しよう!

ただいまの
回答率

87.48%

iPhone chromeでのヘッダーとフッターの固定表示

解決済

回答 1

投稿

  • 評価
  • クリップ 0
  • VIEW 808

score 3

iPhone chromeでヘッダーとフッター要素をposition:fixedにしているのに画面スクロールを行うと
ヘッダー要素はアドレスバーに、フッター要素は下部から表示されるchromeのオブジェクトに隠れてしまいます。

PCやAndroid Chromeでは問題はなく、iPhone Safariでは問題は起きていません。

表題の件につきまして対応をご教授いただければと思い投稿いたしました。

情報に不足がありましたら、申しつけ下さい。

どうぞよろしくお願い致します。

<ヘッダー部>

<div class="header_container-sp">
        <div class="header_left">
          <div class="logo_container-sp">
            <a href="<?php echo esc_url( home_url( '/' ) ); ?>">
            <img src="<?php echo get_theme_file_uri('/images/sp/logo-sp.png'); ?>" width="99" height="93" alt="">
            </a>
          </div>
          <div class="header__upper--center-sp">
            <h1 class="logo_container-sp">
              <img src="<?php echo get_theme_file_uri('/images/sp/common/xxx.png'); ?>" width="484" height="79" alt="">
            </h1>
          </div>
        </div>

        <div class="header_right">
          <!-- ハンバーガーボタン -->
          <button type="button" class="drawer-toggle drawer-hamburger">
            <span class="sr-only">toggle navigation</span>
            <span class="drawer-hamburger-icon"></span>
          </button>

          <header role="banner">

            <!-- ナビゲーションの中身 -->
            <nav class="drawer-nav" role="navigation">
              <ul class="drawer-menu">
                <li class="drawer-brand"> </li>
                <li><a class="drawer-menu-item" href="<?php echo esc_url( home_url( '/' ) ); ?>">HOME</a></li>
                <li><a class="drawer-menu-item" href="<?php echo esc_url( home_url( '/aaa/' ) ); ?>">aaa</a></li>
                <li><a class="drawer-menu-item" href="<?php echo esc_url( home_url( '/bbb/' ) ); ?>">bbb</a></li>
                <li><a class="drawer-menu-item" href="<?php echo esc_url( home_url( '/ccc/' ) ); ?>">ccc</a></li>
                <li><a class="drawer-menu-item" href="<?php echo esc_url( home_url( '/ddd/' ) ); ?>">ddd</a></li>
                <li><a class="drawer-menu-item" href="<?php echo esc_url( home_url( '/eee/' ) ); ?>">eee</a></li>
                <li><a class="drawer-menu-item" href="<?php echo esc_url( home_url( '/fff/' ) ); ?>">fff</a></li>
                <li><a class="drawer-menu-item" href="<?php echo esc_url( home_url( '/ggg/' ) ); ?>">ggg</a></li>
              </ul>
            </nav>
          </header>

        </div><!--header_right-->
      </div>

<ヘッダー部css>
.header_container-sp {
position: relative;
position: fixed;
は、このようにしないと表示が崩れるため、あえて表記しています。

 /*ヘッダーコンテンツの指定*/

  header {
    width: 0;
    border-bottom: none;
  }

  .header_container-sp {
    /*134px*/
    position: relative;
    position: fixed;
    z-index: 9999;
    display: flex;
    /*display: -webkit-box;*/
    display: -ms-flexbox;
    /*追記分*/
    box-sizing: border-box;
    width: 100vw;
    height: 17.448vw;
    /*padding: 20px 30px 20px 30px;*/
    padding: 2.604vw 3.906vw 2.604vw 3.906vw;
    border-bottom: solid 2px #26b9ac;
    background-color: #fff;
    align-items: center;
    -webkit-box-align: center;
    -ms-flex-align: center;
    -webkit-box-pack: justify;
    -ms-flex-pack: justify;
    justify-content: space-between;
  }

  .header_container-sp .header_left {
    display: flex;
    width: 100%;
  }

  .header_container-sp .logo_container-sp {
    margin-right: 6.51vw;
  }

  .header_container-sp .logo_container-sp {
    width: auto;
  }

  .header_container-sp .logo_container-sp img {
    width: 100%;
    max-width: 12.891vw;
    /*99px*/
    height: auto;
  }

  .header_container-sp .header__upper--center-sp {
    display: block;
    margin: auto;
    text-align: center;
  }

  .header_container-sp .header__upper--center-sp .logo_container-sp {
    margin: 0;
  }

  .header_container-sp .header__upper--center-sp img {
    width: 100%;
    max-width: 48.177vw;
    /*370px*/
    height: auto;
  }

  .drawer-toggle.drawer-hamburger:focus {
    outline: none !important;
  }

  .drawer-hamburger {
    width: 9.115vw;
    margin-left: 6.51vw;
    padding: 0;
  }

  .drawer-hamburger-icon,
  .drawer-hamburger-icon:after,
  .drawer-hamburger-icon:before {
    height: 1.302vw;
  }

  .drawer-hamburger-icon:before {
    top: -3.906vw;
  }

  .drawer-hamburger-icon:after {
    top: 3.906vw;
  }

  .header-space {
    margin-top: 17.578vw;
  }

  .drawer-nav {
    background-color: #26b9ac;
  }

  .drawer-menu {
    padding-top: 4.35vw;
  }

  .drawer-hamburger-icon {
    margin: 0;
  }

  .drawer-overlay {
    z-index: 99;
  }

<フッター部>

<div id="fixed_outer">
<nav id="fixed_menu"><ul>
  <li class="menu-item menu-item_tel"><a href="tel:000-000-000" class="tel"></a></li>
  <li class="menu-item menu-item_contact"><a href="<?php echo esc_url( home_url( '/ggg/' ) ); ?>" class="ggg"></a></li>
  </ul></nav><!-- /#header_menu -->
</div>

<フッター部css>

#fixed_outer {
    position: fixed;
    z-index: 9999;
    top: auto;
    right: 0;
    bottom: 0;
    /*padding: 0 15px;*/
    width: 100%;
  }

  #fixed_menu ul {
    position: relative;
    display: flex;
    /*display: -webkit-box;*/
    display: -ms-flexbox;
    flex-direction: row;
    align-items: center;
    -webkit-box-align: center;
    -ms-flex-align: center;
    -webkit-box-orient: horizontal;
    -webkit-box-direction: normal;
    -ms-flex-direction: row;
  }

  #fixed_outer li {
    /*font-family: "Hiragino Kaku Gothic ProN","メイリオ", Meiryo, sans-serif;*/
    font-family: Helvetica Neue, Helvetica, Hiragino Sans, 'ヒラギノ角ゴ ProN W3', 'ヒラギノ角ゴ ProN W6', 'Hiragino Kaku Gothic ProN W3', 'Hiragino Kaku Gothic ProN W6', Hiragino Kaku Gothic ProN, 'メイリオ', Meiryo, sans-serif;
    width: auto;
    height: 12vw;
    /*margin: 0 14px;*/
    margin: 0 .911vw;
    flex: 1 1 25%;
    /*7px*/
  }

  #fixed_outer a {
    font-size: 3.49609vw;
    flex-wrap: wrap;
  }

  #fixed_outer a {
    font-weight: bold;
    z-index: 1000;
    display: flex;
    width: 100%;
    height: 100%;
    background-color: #007532;
    justify-content: space-around;
    align-items: center;
  }

  #fixed_outer a.tel::before {
    width: 7vw;
    height: 7vw;
  }

  #fixed_outer a.contact::before {
    width: 5vw;
    height: 5vw;
  }

  #fixed_outer a.access::before {
    width: 5vw;
    height: 5vw;
  }

  a::before {
    display: block;
    content: '';
    background-repeat: no-repeat;
    background-size: contain;
  }

  #fixed_outer a::after {
    font-size: 3.49609vw;
    color: #fff;
  }

  a.tel::after {
    position: relative;
    top: .651vw;
    /*5px*/
    left: -5.859vw;
    display: block;
    content: 'TEL';
    /*-45px*/
  }

  a.contact::after {
    position: relative;
    top: .651vw;
    /*5px*/
    left: -1.953vw;
    display: block;
    content: 'お問合せ';
    /*-15px*/
  }
  • 気になる質問をクリップする

    クリップした質問は、後からいつでもマイページで確認できます。

    またクリップした質問に回答があった際、通知やメールを受け取ることができます。

    クリップを取り消します

  • 良い質問の評価を上げる

    以下のような質問は評価を上げましょう

    • 質問内容が明確
    • 自分も答えを知りたい
    • 質問者以外のユーザにも役立つ

    評価が高い質問は、TOPページの「注目」タブのフィードに表示されやすくなります。

    質問の評価を上げたことを取り消します

  • 評価を下げられる数の上限に達しました

    評価を下げることができません

    • 1日5回まで評価を下げられます
    • 1日に1ユーザに対して2回まで評価を下げられます

    質問の評価を下げる

    teratailでは下記のような質問を「具体的に困っていることがない質問」、「サイトポリシーに違反する質問」と定義し、推奨していません。

    • プログラミングに関係のない質問
    • やってほしいことだけを記載した丸投げの質問
    • 問題・課題が含まれていない質問
    • 意図的に内容が抹消された質問
    • 過去に投稿した質問と同じ内容の質問
    • 広告と受け取られるような投稿

    評価が下がると、TOPページの「アクティブ」「注目」タブのフィードに表示されにくくなります。

    質問の評価を下げたことを取り消します

    この機能は開放されていません

    評価を下げる条件を満たしてません

    評価を下げる理由を選択してください

    詳細な説明はこちら

    上記に当てはまらず、質問内容が明確になっていない質問には「情報の追加・修正依頼」機能からコメントをしてください。

    質問の評価を下げる機能の利用条件

    この機能を利用するためには、以下の事項を行う必要があります。

回答 1

check解決した方法

0

昨日の投稿の段階では動作に問題が起きていたのですが、本日改めて確認したところ、問題は解決しておりました。

原因は解明中ですが、質問提起は取り下げさせていただきます。
大変失礼致しました。

投稿

  • 回答の評価を上げる

    以下のような回答は評価を上げましょう

    • 正しい回答
    • わかりやすい回答
    • ためになる回答

    評価が高い回答ほどページの上位に表示されます。

  • 回答の評価を下げる

    下記のような回答は推奨されていません。

    • 間違っている回答
    • 質問の回答になっていない投稿
    • スパムや攻撃的な表現を用いた投稿

    評価を下げる際はその理由を明確に伝え、適切な回答に修正してもらいましょう。

15分調べてもわからないことは、teratailで質問しよう!

  • ただいまの回答率 87.48%
  • 質問をまとめることで、思考を整理して素早く解決
  • テンプレート機能で、簡単に質問をまとめられる

関連した質問

同じタグがついた質問を見る