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

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

新規登録して質問してみよう
ただいま回答率
85.50%
Chrome

Google Chromeは携帯、テレビ、デスクトップなどの様々なプラットフォームで利用できるウェブブラウザです。Googleが開発したもので、Blink (レンダリングエンジン) とアプリケーションフレームワークを使用しています。

レスポンシブWebデザイン

レスポンシブWebデザイン(RWD)は、スクリーンのサイズ、プラットフォーム、オリエンテーションに基づいて様々なデバイスで最適のサイトを生成するのウェブデザインとその開発のアプローチ方法を呼びます。

iPhone

iPhoneとは、アップル社が開発・販売しているスマートフォンです。 同社のデジタルオーディオプレーヤーiPodの機能、電話機能、インターネットやメールなどのWeb通信機能の3つをドッキングした機器です。

HTML

HTMLとは、ウェブ上の文書を記述・作成するためのマークアップ言語のことです。文章の中に記述することで、文書の論理構造などを設定することができます。ハイパーリンクを設定できるハイパーテキストであり、画像・リスト・表などのデータファイルをリンクする情報に結びつけて情報を整理します。現在あるネットワーク上のほとんどのウェブページはHTMLで作成されています。

CSS

CSSはXMLやHTMLで表現した色・レイアウト・フォントなどの要素を指示する仕様の1つです。

Q&A

解決済

1回答

1565閲覧

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

netuser

総合スコア3

Chrome

Google Chromeは携帯、テレビ、デスクトップなどの様々なプラットフォームで利用できるウェブブラウザです。Googleが開発したもので、Blink (レンダリングエンジン) とアプリケーションフレームワークを使用しています。

レスポンシブWebデザイン

レスポンシブWebデザイン(RWD)は、スクリーンのサイズ、プラットフォーム、オリエンテーションに基づいて様々なデバイスで最適のサイトを生成するのウェブデザインとその開発のアプローチ方法を呼びます。

iPhone

iPhoneとは、アップル社が開発・販売しているスマートフォンです。 同社のデジタルオーディオプレーヤーiPodの機能、電話機能、インターネットやメールなどのWeb通信機能の3つをドッキングした機器です。

HTML

HTMLとは、ウェブ上の文書を記述・作成するためのマークアップ言語のことです。文章の中に記述することで、文書の論理構造などを設定することができます。ハイパーリンクを設定できるハイパーテキストであり、画像・リスト・表などのデータファイルをリンクする情報に結びつけて情報を整理します。現在あるネットワーク上のほとんどのウェブページはHTMLで作成されています。

CSS

CSSはXMLやHTMLで表現した色・レイアウト・フォントなどの要素を指示する仕様の1つです。

0グッド

0クリップ

投稿2021/02/04 05:54

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

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

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

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

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

<ヘッダー部>

html

1<div class="header_container-sp"> 2 <div class="header_left"> 3 <div class="logo_container-sp"> 4 <a href="<?php echo esc_url( home_url( '/' ) ); ?>"> 5 <img src="<?php echo get_theme_file_uri('/images/sp/logo-sp.png'); ?>" width="99" height="93" alt=""> 6 </a> 7 </div> 8 <div class="header__upper--center-sp"> 9 <h1 class="logo_container-sp"> 10 <img src="<?php echo get_theme_file_uri('/images/sp/common/xxx.png'); ?>" width="484" height="79" alt=""> 11 </h1> 12 </div> 13 </div> 14 15 <div class="header_right"> 16 <!-- ハンバーガーボタン --> 17 <button type="button" class="drawer-toggle drawer-hamburger"> 18 <span class="sr-only">toggle navigation</span> 19 <span class="drawer-hamburger-icon"></span> 20 </button> 21 22 <header role="banner"> 23 24 <!-- ナビゲーションの中身 --> 25 <nav class="drawer-nav" role="navigation"> 26 <ul class="drawer-menu"> 27 <li class="drawer-brand"> </li> 28 <li><a class="drawer-menu-item" href="<?php echo esc_url( home_url( '/' ) ); ?>">HOME</a></li> 29 <li><a class="drawer-menu-item" href="<?php echo esc_url( home_url( '/aaa/' ) ); ?>">aaa</a></li> 30 <li><a class="drawer-menu-item" href="<?php echo esc_url( home_url( '/bbb/' ) ); ?>">bbb</a></li> 31 <li><a class="drawer-menu-item" href="<?php echo esc_url( home_url( '/ccc/' ) ); ?>">ccc</a></li> 32 <li><a class="drawer-menu-item" href="<?php echo esc_url( home_url( '/ddd/' ) ); ?>">ddd</a></li> 33 <li><a class="drawer-menu-item" href="<?php echo esc_url( home_url( '/eee/' ) ); ?>">eee</a></li> 34 <li><a class="drawer-menu-item" href="<?php echo esc_url( home_url( '/fff/' ) ); ?>">fff</a></li> 35 <li><a class="drawer-menu-item" href="<?php echo esc_url( home_url( '/ggg/' ) ); ?>">ggg</a></li> 36 </ul> 37 </nav> 38 </header> 39 40 </div><!--header_right--> 41 </div>

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

css

1 /*ヘッダーコンテンツの指定*/ 2 3 header { 4 width: 0; 5 border-bottom: none; 6 } 7 8 .header_container-sp { 9 /*134px*/ 10    position: relative; 11 position: fixed; 12 z-index: 9999; 13 display: flex; 14 /*display: -webkit-box;*/ 15 display: -ms-flexbox; 16 /*追記分*/ 17 box-sizing: border-box; 18 width: 100vw; 19 height: 17.448vw; 20 /*padding: 20px 30px 20px 30px;*/ 21 padding: 2.604vw 3.906vw 2.604vw 3.906vw; 22 border-bottom: solid 2px #26b9ac; 23 background-color: #fff; 24 align-items: center; 25 -webkit-box-align: center; 26 -ms-flex-align: center; 27 -webkit-box-pack: justify; 28 -ms-flex-pack: justify; 29 justify-content: space-between; 30 } 31 32 .header_container-sp .header_left { 33 display: flex; 34 width: 100%; 35 } 36 37 .header_container-sp .logo_container-sp { 38 margin-right: 6.51vw; 39 } 40 41 .header_container-sp .logo_container-sp { 42 width: auto; 43 } 44 45 .header_container-sp .logo_container-sp img { 46 width: 100%; 47 max-width: 12.891vw; 48 /*99px*/ 49 height: auto; 50 } 51 52 .header_container-sp .header__upper--center-sp { 53 display: block; 54 margin: auto; 55 text-align: center; 56 } 57 58 .header_container-sp .header__upper--center-sp .logo_container-sp { 59 margin: 0; 60 } 61 62 .header_container-sp .header__upper--center-sp img { 63 width: 100%; 64 max-width: 48.177vw; 65 /*370px*/ 66 height: auto; 67 } 68 69 .drawer-toggle.drawer-hamburger:focus { 70 outline: none !important; 71 } 72 73 .drawer-hamburger { 74 width: 9.115vw; 75 margin-left: 6.51vw; 76 padding: 0; 77 } 78 79 .drawer-hamburger-icon, 80 .drawer-hamburger-icon:after, 81 .drawer-hamburger-icon:before { 82 height: 1.302vw; 83 } 84 85 .drawer-hamburger-icon:before { 86 top: -3.906vw; 87 } 88 89 .drawer-hamburger-icon:after { 90 top: 3.906vw; 91 } 92 93 .header-space { 94 margin-top: 17.578vw; 95 } 96 97 .drawer-nav { 98 background-color: #26b9ac; 99 } 100 101 .drawer-menu { 102 padding-top: 4.35vw; 103 } 104 105 .drawer-hamburger-icon { 106 margin: 0; 107 } 108 109 .drawer-overlay { 110 z-index: 99; 111 }

<フッター部>

html

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

<フッター部css>

css

1#fixed_outer { 2 position: fixed; 3 z-index: 9999; 4 top: auto; 5 right: 0; 6 bottom: 0; 7 /*padding: 0 15px;*/ 8 width: 100%; 9 } 10 11 #fixed_menu ul { 12 position: relative; 13 display: flex; 14 /*display: -webkit-box;*/ 15 display: -ms-flexbox; 16 flex-direction: row; 17 align-items: center; 18 -webkit-box-align: center; 19 -ms-flex-align: center; 20 -webkit-box-orient: horizontal; 21 -webkit-box-direction: normal; 22 -ms-flex-direction: row; 23 } 24 25 #fixed_outer li { 26 /*font-family: "Hiragino Kaku Gothic ProN","メイリオ", Meiryo, sans-serif;*/ 27 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; 28 width: auto; 29 height: 12vw; 30 /*margin: 0 14px;*/ 31 margin: 0 .911vw; 32 flex: 1 1 25%; 33 /*7px*/ 34 } 35 36 #fixed_outer a { 37 font-size: 3.49609vw; 38 flex-wrap: wrap; 39 } 40 41 #fixed_outer a { 42 font-weight: bold; 43 z-index: 1000; 44 display: flex; 45 width: 100%; 46 height: 100%; 47 background-color: #007532; 48 justify-content: space-around; 49 align-items: center; 50 } 51 52 #fixed_outer a.tel::before { 53 width: 7vw; 54 height: 7vw; 55 } 56 57 #fixed_outer a.contact::before { 58 width: 5vw; 59 height: 5vw; 60 } 61 62 #fixed_outer a.access::before { 63 width: 5vw; 64 height: 5vw; 65 } 66 67 a::before { 68 display: block; 69 content: ''; 70 background-repeat: no-repeat; 71 background-size: contain; 72 } 73 74 #fixed_outer a::after { 75 font-size: 3.49609vw; 76 color: #fff; 77 } 78 79 a.tel::after { 80 position: relative; 81 top: .651vw; 82 /*5px*/ 83 left: -5.859vw; 84 display: block; 85 content: 'TEL'; 86 /*-45px*/ 87 } 88 89 a.contact::after { 90 position: relative; 91 top: .651vw; 92 /*5px*/ 93 left: -1.953vw; 94 display: block; 95 content: 'お問合せ'; 96 /*-15px*/ 97 }

気になる質問をクリップする

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

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

バッドをするには、ログインかつ

こちらの条件を満たす必要があります。

guest

回答1

0

自己解決

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

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

投稿2021/02/05 14:53

netuser

総合スコア3

バッドをするには、ログインかつ

こちらの条件を満たす必要があります。

あなたの回答

tips

太字

斜体

打ち消し線

見出し

引用テキストの挿入

コードの挿入

リンクの挿入

リストの挿入

番号リストの挿入

表の挿入

水平線の挿入

プレビュー

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

ただいまの回答率
85.50%

質問をまとめることで
思考を整理して素早く解決

テンプレート機能で
簡単に質問をまとめる

質問する

関連した質問