CSSのheightを調整しようとしたら詰まった話

土日なのですが何もせずダラダラと過ごしてしまいました...とりあえず家から出なければ...！でも雪降ってたりするし寒いから車欲しい...🚗☃(切実)

さて、今回はタイトル通りCSSのheightを弄ってたら無駄に時間を浪費してしまった話です。笑

結論から言うと自分がクソザコなだけだったのですが忘れないようブログに書いておきます。おお！備忘録っぽい！←

まずこんな感じのページ構造のファイルを弄ってた

f:id:Shone:20151206233559p:plain:w400:h500
HTML

<!DOCTYPE html>
<html>
  <head>
    <meta charset="utf-8">
    <title>height test</title>
    <link rel="stylesheet" href="./css/master.css">
  </head>
  <body>
    <header>
      ※ イメージです
    </header>
    <div class="elem-floralwhite">
      <h1>
        [Element]
      </h1>
      <div class="elem-green">
        [div]
      </div>
      <div>
        <p>test</p>
        <p>test</p>
        <p>test</p>
        <p>test</p>
      </div>
    </div>
  </body>
</html>

CSS

.elem-floralwhite {
  background-color: floralwhite;
}

.elem-green {
  font-size: 2em;
  background: #6fb536;
  width: 300px;
  height: 200px;
}

ここで0xShone少年、緑色の部分のdivのwidthとheightの大きさをpxからパーセントにしたくなる(唐突)

widthとheightの両方を50%にすればだいたい同じくらいの大きさになるやろ(適当)

んで、こんなふうに書き換えた

.elem-green {
  color: white;
  font-size: 2em;
  background: #6fb536;
  width: 50%; /* 300px -> 50% */
  height: 50%; /* 200px -> 50% */
}

さてさて、どんな感じかな？
f:id:Shone:20151206233757p:plain:w300:h400
は？
f:id:Shone:20151206223559j:plain

あれ...？均等に小さくしたのに縦がアホみたいに伸びてるぞ...？

とりあえずheightの値を25%にしてみたらいい感じの大きさになったけれどなんかもやもやする

そこでおなじみGoogle先生に聞いてみる

＼　分かった　／　＼　流石Google先生　／　

どうやらwidthと違ってheightの大きさを%で指定するときは明示的に親要素の大きさを決めて置かなければいけないらしい

逆に言うと親要素の大きさを指定しておけばheightの大きさもしっかり % で指定できるということ

今回のhtmlを見てみると"elem-green"の親要素"elem-floralwhite"の大きさを指定してやる

HTML

<div class="elem-floralwhite"> /* %で指定したい要素の親要素 */
  <h1>
    [Element]
  </h1>
  <div class="elem-green"> /* 大きさを % で指定したい要素 */
    [div]
  </div>
  <div>
    <p>test</p>
    <p>test</p>
    <p>test</p>
    <p>test</p>
  </div>
</div>

CSS

.elem-floralwhite {
  background-color: floralwhite;
  width: 600px; /* 一応widthも指定する */
  height: 400px; /* <-しっかりheightを指定する */
}

.elem-green {
  color: white;
  font-size: 2em;
  background: #6fb536;
  width: 50%;
  height: 50%;
}

出力結果を見てみると...?
f:id:Shone:20151206235321p:plain:w300:h400
YES！！！しっかりサイズを指定できた

今回は独学で学ぶとしょーもないところでぶつかるという内容でした笑

でもまあhtmlとかcssとかやってるとクスッと来るような表示になったりするものもあるのでそれもhtmlとかcssの面白いとこなのかなとｗ

拙い内容でしたがご閲覧ありがとうございました！

気の抜けたラムネ

エンジニアの筆者が書く雑多ブログです。

CSSのheightを調整しようとしたら詰まった話