CSS ウインドウの高さに応じて、背景の長さを変えたいです。

Question

前提・実現したいこと

ウインドウの高さに応じて、背景の長さを変えたいです

ここに質問の内容を詳しく書いてください。
HTMLとCSSで1ページを作っています。

section　class="function"の高さを画面に合わせて変動できるようにしたいです。
（レスポンシブ）

発生している問題・エラーメッセージ

500pxと高さを指定している為、
ウインドウの長さを引き延ばすと、背景が途切れてしまいます。

試したこと

%指定すると、footerの位置が崩れてしまいます。
（グレー背景の上に浮かんでる状態）
どうしてもできず質問させて頂きました。

ご教示頂きたいです。どうぞよろしくお願いいたします。

該当のソースコード

  <section class="function">
    <h1>Function</h1>
    <div class="function-images clearfix">
      <div class="function-image">
        <p>機能1</p>
      </div>
      <div class="function-image">
        <p>機能2</p>
      </div>
      <div class="function-image">
        <p>機能3</p>
      </div>
      <div class="function-image">
        <p>機能4</p>
      </div>
    </div>
  </section>
  <footer>
    <div class="sentences">
      <p>test</p>
      <p>test</p>
    </div>
  </footer>

html {
  position: relative;
  min-height: 100%;
}

body {
  text-align: center;
  height: 100%;
}


.function {
  background-color:#BABFC3;
  font-size: 12px;
  width: 100%;
  height: 500px;
  padding-top:20px;

}

.function-images {
  display: inline-block;
}

.function-image {
  float: left;
  margin: 0 15px 0;
  padding: 15px;
  width: 15%;
  height: auto;
}

.clearfix:after {
  content: "";
  display: block;
  clear: both;
}
footer {
  background-color: #000000;
  height: 80px;
  width: 100%;
  position: absolute;
  bottom: 0;
  display: table;
}

footer .sentences{
  display: table-cell;
  text-align: center;
  vertical-align: bottom;
}

footer p {
  font-size: 12px;
  line-height: 12px;
  color: #ffffff;
}

Comments

[yoshinavi]

タイトルと質問内容が違うのでは？
色を着けるだけであれば、bodyに背景色設定で良いのでは？

[tai_chi]

言葉が足らずで申し訳ありません。
同じ色にすれば考える必要もないですね。。
レスポンシブの勉強として、section　class="function"の高さを画面に合わせて変動できるようにしたいと考えておりました。

Answer 1

HTMLでviewportを指定すればvhが使えます。
これは画面の表示領域の高さを100vhとする単位です。

viewport : <meta name="viewport" content="width=device-width,initial-scale=1.0">

calcを使う指定方法はek9yamaさんが示してくださっているので割愛させていただきます。

Comments

[tai_chi]

ご回答頂きましてありがとうございます。
一度試し改めてご連絡させて頂きます！

[tai_chi]

calcは知りませんでした。
勉強いたしますありがとうございました！https://developer.mozilla.org/ja/docs/Web/CSS/calc

Answer 2

vhという画面の高さを基準にする単位を指定する方法があります。
例えば、

height: 100vh;

とすれば、画面いっぱいの高さになります。
calcをうまく組み合わせれば、求める高さを設定できるのではないでしょうか？

フッター80px分短くする場合の記述例です。

height: calc(100vh - 80px);

Comments

[tai_chi]

ご教示頂きましてありがとうございます。
試した後に改めてご連絡させて頂きます！

[tai_chi]

期待通りにすることができました！
ありがとうございます。勉強になりました。