Q&A現在HTMLとCSSを使用してWeb画面を作成しているのですが、
Chromeで正常に動作するものがEdgeだと挙動が異なってしまいます。
現在のコードは下記です
HTML
1<body> 2 <div class="wrapper"> 3 <header> 4 ヘッダー 5 </header> 6 7 <p>スクロールテスト</p> 8 <!-- 一部省略 --> 9 <p>スクロールテスト</p> 10 11 <footer> 12 フッター 13 </footer> 14 </div> 15</body>
CSS
1.wrapper { 2 position: relative; 3 min-height: 100vh; 4 padding-top: 70px; 5 padding-bottom: 40px; 6 box-sizing: border-box; 7} 8 9header { 10 position: absolute; 11 left: 0; 12 top: 0; 13 display: flex; 14 justify-content: flex-end; 15 height: 50px; 16 width: 100%; 17 margin-bottom: 20px; 18 align-items: center; 19 background-color: #006699; 20 box-shadow: 0 3px 6px rgba(0, 0, 0, 0.2); 21} 22 23footer { 24 position: absolute; 25 bottom: 0; 26 left:0; 27 display: flex; 28 justify-content: center; 29 align-items: center; 30 height: 30px; 31 width: 100%; 32 background-color: #006699; 33}
【スクリーンショット：Chrome１】
【スクリーンショット：Chrome２】
Chromeだとスクロールしてもヘッダーもフッターも画面上と下にぴったりくっついてくれますが、
Edgeだと下記のようにスクロールできてしまいます。
【スクリーンショット：Edge１(初期表示）】
Edgeでこのようにスクロール？といいますか、下にぐぐっとずらせてしまうのは仕様なのでしょうか。
ノートパソコンのタッチパッドから 指を離せば元の位置に戻る のですが・・・
どうにか ずれないように固定 は出来ないでしょうか・・・
Edgeでのヘッダー・フッター固定について知識をお持ちの方いらっしゃいましたらご助力頂けますと幸いです。
追記
【他のサイトもEdgeで見てみた】
ヘッダー・フッター固定をうたっているサイトもEdgeで引っ張ったときにずれるということは
そういう仕様とあきらめた方がよいのかな・・・？
ノートパソコンのタッチパッドだから悪いのか？
回答2件
0
自己解決
仕様な気がするので締めます。
新しいEdgeだとヘッダーとフッターが固定出来てました
投稿2020/11/09 22:59
総合スコア24
0
EdgeやIEですと、position要素を設定したときにずれてしまうという事例がWebでも多く散見されます。
下記のサイトで詳しく書かれていますので、参考にしてみください。
position:absolute は位置指定をしていないと親要素の影響で思わぬ動きをするときがある、という話
スクロールテストという文字がヘッダーやフッターの下に滑り込む形になりますが…
CSS
1header{ 2 position: fixed; 3 /*以下同様のCSS*/ 4} 5footer { 6 position: fixed; 7 /*以下同様のCSS*/ 8} 9
これで固定されるはずです。
投稿2020/11/09 09:28
編集2020/11/09 09:37
総合スコア74
あなたの回答
tips
プレビュー
バッドをするには、ログインかつ
こちらの条件を満たす必要があります。