CSSで親要素の幅の70%を高さにしたい

Question

質問

親要素の「幅」の70%を子要素の「高さ」として使いたいと思っています。

例えば、下の例で言えば、「.itemのheightを.containerのwidthの70%、700pxにしたい。」となります。

ただし、この例のように、あらかじめ.containerに定数を設定しているわけではなく、レスポンスに変動します。

どうするのがベターでしょうか？もしかして、CSSだけでは解決できないでしょうか？

<.container>
    <item>
    </item>
</container>

.container{
    position: realative;
    width: 1000px;
    height: 2000px;
}
.item{
    position: realative;
}

環境

• React + Typescript
• SASS記法

Answer 1

padding-top を%で指定すると、親要素の横幅が基準になるという性質を利用したテクがよく使われます。(「css レスポンシブ 縦横比固定」をキーワードに検索すれば解説ページがいろいろ見つかります。)

<div class="container">
  <div class="item">
    <div>コンテント</div>
  </div>
</div>

.container{
  width: 80%;
  height: 2000px;
  border: 1px solid gray;
}
.item {
  position: relative;
}

.item > div{
  border: 1px solid pink;
  position: absolute;
  top: 0;
  left: 0;
  bottom: 0;
  right: 0;
}

.item::before {
  content: "";
  display: block;
  padding-top: 70%;
}

---

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

値
<length>
固定値によるパディングの寸法です。負の数であってはいけません。
<percentage>
包含ブロックの width に対するパーセント値によるパディングの寸法です。負の数であってはいけません。

Comments

[ShortArrow]

これバグじゃないんですか？？

[ShortArrow]

すごい

[hatena19]

仕様です。MDNの引用を回答に追記しました。

[ShortArrow]

ありがとうございます！いつもemかpxで指定しているので気が付きませんでした！そんな仕様があったなんて！

[ShortArrow]

margin-topでも出来そうですね！とても興味深い仕様ですbottomのほうでも出来そう

Answer 2

CSS変数（カスタムプロパティ）を使えば、まあできると言えばできる、かな？

こうですかね。

<div class="container">
    <div class="item">
    </div>
</div>

:root{
  --container-width: 1000px;
}
.container{
    width: var(--container-width);
    height: 2000px;
}
.item{
    height: calc(0.7 * var(--container-width));
}

Comments

[ShortArrow]

.containerのwidthを`--container-width:`に`Ctrl+R`でリロード毎に入れるみたいなのって難しいでしょうか？やっぱり、やってる人聞かないし、ドキュメントも見つからないということは、もっといい方法があるのでしょうか？

[itagagaki]

ウィンドウの幅が変わったら自動的にスタイルも変えるということですか？
それはJavaScriptの出番かもしれませんねー。