【CSS】position:absoluteのdiv要素の高さを期待通りに動作させる方法

  • 投稿 : 2018-04-28
.box2{
  position: relative;
}
.box2:before {
  content: "";
  display: block;
  padding-top: 100%;
}
.box2-inner {
  position: absolute;
  top: 0;
  left: 0;
}

「.box2-inner」がposition:absoluteのdivのクラス名です。その外側に、「.box2」のdivを作成します。

参考:
position:absoluteした要素に可変の高さを与える - Qiita
【CSS】position:absolute な BOX の高さ | HHH@venture | @venture = Adventure!

補足

子要素全てがposition:absolute;(またはfixed)を指定された場合には高さがゼロになってしまいます。
CSS:難しい?意外と便利なpositionを使いこなそう | ホームページ更新倶楽部|お気軽にサイト修正


スポンサーリンク
タグ#CSS#code