CSSにてHTMLの高さを100％にしたら、HTMLの高さがブラウザーの高さになってしまっている。

前提・実現したいこと

サイトの内容が短く、ウィンドウを目一杯使えない時でもフッターがページ下部に表示され、コンテンツ部分の下空きスペースが拡張されるようにしたい。

【ここに質問の内容を詳しく書いてください。】
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>
    &copy; 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;を指定してみてはいかがでしょう。

yoshinavi

2019/02/16 11:31

「footer」のHTMLとCSS、「#wrapper」のHTMLはどうなっていますか？

black_kuma

2019/02/16 12:36

yoshinavi様、重要な部分の記入漏れをご指摘いただきありがとうございます。抜けていた部分をここに記載し、質問自体を編集します。なお、kei344様に教えていただいた解決方法で問題が解決した事をご報告いたします。【footer情報】 HTML: <footer> © Hoge 2019 </footer> CSS: footer { background: #ebebebff; margin: 0px 0px 4px 0px; padding: 6px 0px 6px 0px; font-size: 0.5rem; text-align: center; } 【wrapper情報】 HTML: <div id=wrapper> <header id=web_title> <h1>Hoge</h1> 　</header> <section id=main_section> <div class=article> </section> <footer> © Hoge 2019 </footer> </div> CSS: #wrapper { min-height: 100vh; background-color: #fafafa; }

yoshinavi

2019/02/16 12:40

各コードはコードブロックで表示させておくと、同様の問題で悩んでいる人への指標となりますので、編集しておくのは良いと思います。解決されたみたいで何よりです。 (^^)