HTML&CSS 背景設定について

聞きたいこと
黒色のclass="footer"をどのようにすれば下に持っていけるのでしょうかに持っていけるのでしょうか？

test.html

<!DOCTYPE html>
<html>
  <head>
      <meta charset="utf-8">
      <title>test</title>
      <link rel="stylesheet" href = "test.css">
  </head>

  <body>

      <header class ="header">
        <div class= "header-left"></div> 
      </header>

      <div class ="contents">
        <div class ="left-content"></div>
        <div class = "contents-main">
          <footer class="footer"></footer>
        </div>
      </div>

  </body>
</html>

test.css

html, body{
  height: 100%;
  margin: 0;
  padding: 0;
}

.header{
  background-color: blue;
  height:180px;
  width: calc(100%-300px);
}

.header-left{
  background-color:pink;
  float:left;
  height:180px;
  width:300px;
}

.contents{
  background-color:grey;
  height: calc(100vh - 240px);
  
  width:100%;
  float:left;
}

.left-content{
  background-color:red;
  height: calc(100vh - 180px);
  float:left;
  width:300px;
   
}

.contents-main{
  height:100vh;
}

.footer{
  background-color:black;
  width: calc(100%-300px);
  height:60px;
}

m.ts10806

2020/05/14 14:17

コードやエラーはマークダウンのcode機能を利用してご提示ください。 https://teratail.com/questions/238564 「下に」が「固定」であれば、調べて見つかる情報は少なくないと思います。

kei344

2020/05/14 14:17

（質問文は編集できます）質問文のHTML/CSSはそれぞれコードブロックで囲んでいただけませんか？ ```（バッククオート3つ）で囲み、前後に改行をいれるか、コードを選択して「<code>」ボタンを押すとコードブロックになります。

行動規範の内容に同意します

回答1件

自己解決

解決しました

.contents{
  background-color:grey;

  width:100%;
  float:left;
}

.left-content{
  background-color:red;
  height: calc(100vh - 180px);
  float:left;
  width:300px;
   
}

.contents-main{
  height: calc(100vh - 240px);
  width: calc(100%-300px);
}

.footer{
  background-color:black;
  width: calc(100%-300px);
  height:60px;
}

投稿2020/05/14 14:45

zzaa

総合スコア9