Q&A
前提・実現したいこと
flexboxを使いブラウザ上部に固定されるヘッダーを実装したいのですが、こちら（https://zenn.dev/knknk98/articles/10b2f071ad2bc1）を参考に実装してみたところ、ヘッダーが固定されないという問題が起きています。
該当のソースコード
html
1<html lang="ja"> 2 3<head> 4 <meta charset="UTF-8" /> 5 <meta name="viewport" 6 content="width=device-width, initial-scale=1.0" /> 7 <link rel="stylesheet" 8 href="sample.css" /> 9 <title>ヘッダー/フッターを固定する</title> 10</head> 11 12<body> 13 <div class="container"> 14 <header>ヘッダーだよ</header> 15 <main>ここにメイン要素を書くよ</main> 16 <footer>フッターだよ</footer> 17 </div> 18</body> 19 20</html>
CSS
1.container { 2 display: -webkit-box; 3 display: flex; 4 flex-direction: column; 5 width: 100vw; 6 height: 100vh; 7} 8 9main { 10 display: -webkit-box; 11 flex: 1; 12 background-color: rgba(255, 253, 237, 1); 13 overflow-y: scroll; 14} 15 16header { 17 height: 50px; 18} 19 20footer { 21 height: 50px; 22} 23
試したこと
自分の環境に問題があるかもしれないと考え、Codepenでも実行してみましたが、ヘッダーは固定されませんでした。
回答1件
0
ベストアンサー
参考サイトにも書かれていますがブラウザ標準のmarginがbodyに適用されています。
css
1body{ 2margin:0; 3}
にしましょう。
投稿2021/11/26 02:21
総合スコア1426
あなたの回答
tips
プレビュー
バッドをするには、ログインかつ
こちらの条件を満たす必要があります。
2021/11/26 05:56