CSSで高さが反映されない

cssで高さを100%にしても反映されません。
調べてみたところ親要素に100%、htmlクラスにも100%にすればいいとの記事が多かったので試してみましたが反映されませんでした。
以下のコードの悪いところを指摘ください。
ちなみにVue.jsを使うのでidの記述などもあります。

html
1<html lang="en">
2  <head>
3    <meta charset="utf-8">
4    <meta name="viewport" content="width=device-width,initial-scale=1.0">
5    <link rel="stylesheet" href="main.css">
6  </head>
7  <body class = "body-tag">
8    <script src="https://vue.js"></script>
9    <div id = "app">
10      <div class = "all">
11        <div class = "head">
12    </div>
13  </body>
14</html>

css
1,html
2  .body-tag {
3    height: 100%;
4    width: 100%;
5  }
6    .app {
7      height: 100%;
8      width: 100%;
9    }
10      .head {
11        height: 20%;
12        width: 100%;
13      }

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

回答4件

idもcssで指定しなければならないと知りませんでした。
ありがとうございました。

投稿2020/11/02 03:10

shirout

総合スコア36

ベストアンサー

いろいろ間違いが多いのでまずはそれを直しましょうか。

<div class = "all">と<div class = "head">の終了タグが無い(他の回答者が指摘済み)

→ 終了タグを追加しましょう。

<div id = "app">タグはidなのにcssセレクタは.appとクラス指定

→ タグのidをclassに変更するか、セレクタをid指定に変更

高さの%指定は親要素の高さを基準とした相対値になりますので、親要素に高さを指定する必要がある

→ すべての親要素にheight: 100%を指定しましょう。(html, bodyも含む)

上記の点を修正すると、

html
1<body>
2  <div id = "app">
3    <div class = "all">
4      <div class = "head">
5        head
6      </div>
7    </div>
8  </div>
9</body>

css
1html,
2body {
3  height: 100%;
4  width: 100%;
5  margin: 0;
6}
7#app {
8  height: 100%;
9  width: 100%;
10  background-color: lightcyan;
11}
12.all {
13  height: 100%;
14}
15
16.head {
17  height: 20%;
18  width: 100%;
19  border: 1px solid;
20  box-sizing: border-box;
21}

分かりやすいように背景色と境界線を追加してます。

高さを%指定すると画面の高さにするのにすべての親要素に対してheight: 100%する必要があり、入れ子構造が深いと面倒です。その場合、vhという単位を使うと一か所のみ指定ですみます。

css
1body {
2  margin: 0;
3}
4#app {
5  background-color: lightcyan;
6}
7.all {
8  height: 100vh;
9}
10.head {
11  height: 20%;
12  border: 1px solid;
13  box-sizing: border-box;
14}