ブラウザ幅によるheightの設定

Question

まずこの3枚の画像を見て欲しいのですが

このサイトでは、背景の青色(rgb(0, 108, 112))の部分を、ブラウザ幅によってheightが変わっているのとは別に「文字列が増えた時にheightもそれに合わせて変わる」という仕様はどのように実装されているのでしょうか。

自分でも作成してみようと思ったのですが、デベロッパーツールを見ても実装方法がわかりませんでした。

どなたか教えていただけるとありがたいです。
元サイト

Comments

[Lhankor_Mhy]

「青色」とは rgb(0, 108, 112) のことでいいですか？

[sshino]

大丈夫です。追記しておきます。m(_ _)m

[Lhankor_Mhy]

「＠mediaを使うことでブラウザ幅によってheightを変更している」とのことですが、その部分を見つけることができませんでした。
実際のコードで例示していただいてもよろしいですか？

[sshino]

言葉足らずで申し訳ないです。
実際のサイトでは@mediaを使用しているか確認はしていませんが、ブラウザ幅によってheightが変わっているのとは別に「文字列が増えた時にheightもそれに合わせて変わる」という仕様はどのように実装されているのだろうと思い質問しました。

[kei344]

「「文字列が増えた時にheightもそれに合わせて変わる」という仕様」はHTMLの大半の要素で高さを固定していない場合自動でそうなりますが、まずご自身が今試されているコードを提示してみてください。

Answer 1

heightの初期値はautoです。

初期値 auto

height - CSS: カスケーディングスタイルシート | MDN

これは、何も指定しない時にautoになるということです。

では、autoの時に高さはどのように計算されるかというと、以下のページの通りに定義されています。

10.6.3 Block-level non-replaced elements in normal flow when 'overflow' computes to 'visible' | Visual formatting model details

細かい話はかなりややこしいのですが、大雑把に書くと「内容に合わせる」ということです。

---

つまり、「どのように実装されているのでしょうか」の答えは「何もしなくてよい」になります。