headerとfooterの高さを認識出来ない

headerとfooterの高さが認識出来なくなりました。どうすれば良いでしょうか？ご教示お願いします。

HTML
1<!DOCTYPE html>
2<html lang="ja">
3
4<head>
5  <meta charset="UTF-8">
6  <title>スタンダードレイアウト</title>
7  <link rel="stylesheet" href="css/style.css">
8</head>
9
10<body>
11<header class="header">
12</header>
13
14<div class="wrapper clearfix">
15  <main clas="main">
16  </main>
17
18  <div class="sub">
19  </div>
20</div>
21
22<footer clas="footer">
23</footer>
24
25
26</body>
27</html>
28

CSS
1@charset "UTF-8";
2
3.header {
4  width:100%;
5}
6
7.wrapper {
8  width: 970px;
9  margin:30px auto 40px;
10}
11
12.clearfix::after {
13  display: block;
14  content: '';
15  clear: both;
16}
17
18.main {
19  display: block;
20  float: left;
21  width: 600px;
22}
23
24.sub {
25  float:right;
26  width: 275px;
27}
28
29.footer {
30  width: 100%;
31}
32
33.header, .main, .sub, .footer{
34  border: 1px solid #aaa;
35  background-color: #ccc;
36}
37
38.header,  .footer{
39  height: 100px;
40}
41
42.main, .sub{
43  height: 500px;
44}
45

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

回答2件

ベストアンサー

単純なスペルミスですね

<footer clas="footer">

HTML
1<footer class="footer">

ちなみに、headerやfooterなどはクラスをつけなくてもCSSで直接タグ指定も可能です

CSSsample
1header {
2 height:100px;
3}
4footer {
5 width:100%;
6}
7

投稿2018/10/19 00:01

8yazaki

総合スコア454

headerとfooterにdisplay: block;がついてないからではないでしょうか。

投稿2018/10/18 18:27

mrkmyki

総合スコア325

あなたの回答

tips

プレビュー

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

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

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

ただいまの回答率
85.48%

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

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

質問する

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

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

headerとfooterの高さを認識出来ない

関連した質問