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

あなたの回答

tips

プレビュー

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

質問の解決につながる回答をしましょう。サンプルコードなど、より具体的な説明があると質問者の理解の助けになります。また、読む側のことを考えた、分かりやすい文章を心がけましょう。

15分調べてもわからないことは
teratailで質問しよう！

ただいまの回答率
85.46%

質問をまとめることで
思考を整理して素早く解決

テンプレート機能で
簡単に質問をまとめる

質問する

質問をすることでしか得られない、回答やアドバイスがある。

15分調べてもわからないことは、質問しよう！

HTML&CSS 背景設定について

関連した質問