前提・実現したいこと
サイトの内容が短く、ウィンドウを目一杯使えない時でもフッターがページ下部に表示され、コンテンツ部分の下空きスペースが拡張されるようにしたい。
【ここに質問の内容を詳しく書いてください。】
CSSにてHTML,BODY をそれぞれ100%に設定してあります。これで上記の前提・実現したいことは叶いました。
しかし、逆にサイトがウィンドウの高さよりも長く、背景色が設定されている時にはHTML全体に背景色が適用されず、ウィンドウの高さまでしか適用されなくなってしまいました。例えばユーザーのウィンドウの高さが1000pxでHTML自体の高さが1600px程あった場合にはHTMLの高さが1000pxとなり、BODYとその後WRAPPERがその高さを継承してしまい、背景色が1000pxまでしか適用されずそれ以降の600pxがデフォルトカラーになってしまっています。
試しにHTMLのHEIGHTを削除してみたところ、背景色がページ全体に適用されました。しかし削除してしまうとページ全体の高さが1000px未満の場合にはページ全体に背景色が適用されず、元の木阿弥になっています。
これは僕のHTML及びCSSの記述に問題があるのでしょうか?
発生している問題・エラーメッセージ
HTMLの高さを100%にした場合、ページの高さがウィンドウの高さに固定されてしまい、ページがスクロールする状態になったらはみ出てる下部分にCSSが適用されなくなった。
該当のソースコード
HTML <!DOCTYPE html> <html lang="ja"> <head> <meta charset="UTF-8"> <title>HOGE</title> <link rel="stylesheet" href="style.css" type="text/css" /> </head> <body> <div id=wrapper> <header id=web_title> <h1>Hoge</h1> </header> <section id=main_section> <div class=article> </section> <footer> © Hoge 2019 </footer> </div> </body> </html> CSS html{ height: 100%; } body { height: 100%; margin: 0px; padding: 0px; font-family: 'Noto Sans JP', sans-serif; color: #000000; } #wrapper { height: 100%; background-color: #822323; } footer { background: #ebebebff; margin: 0px 0px 4px 0px; padding: 6px 0px 6px 0px; font-size: 0.5rem; text-align: center; }
試したこと
HTMLの「height: 100%;」を削除してみた。これにより問題は治ったが、今度は「実現したい事」が実現されなくなった。
補足情報(FW/ツールのバージョンなど)
元々はGRIDレイアウトを使用しており、それが問題の元かと思い普通GRIDを辞めてみたが問題は解決されませんでした。IEとChromeの両方で同じ症状が出ています。
初歩の初歩の問題ですが、問題部分を教えていただけると幸いです。
それではよろしくお願いいたします。
kei334様に教えていただいた方法で問題解決しました。
【教えていただいた内容】
height: 100%;を全て外し、#wrapper に min-height: 100vh;を指定してみてはいかがでしょう。
回答1件
あなたの回答
tips
プレビュー