TECH BLOG

アートボード 1

position: absolute; の要素をリキッド表示に対応させる方法

2020.07.04

FRONT-END

position: absolute; を使うと起きること

height: auto; にした場合

高さが取得されず、高さ 0 になります。

.c-box {
  position: absolute;
  width: 50%; // 親要素の横幅に対して50%
  height: auto;
}

height: n%にした場合

親要素の高さに対して n% を指定しているので、画面の幅を変えたときに要素の縦横比が維持されません。

.c-box {
  position: absolute;
  width: 50%; // 親要素の横幅に対して50%
  height: 50%; // 親要素の高さに対して50%
}

position: absolute; でも縦横比を維持したまま表示するには?

height: 0;padding を使います。
「高さが必要なのに0にするなんて頭おかしいんじゃないか」と思われるかもしれませんが、こちらのデモページをご覧ください。
画面をリサイズしても要素の縦横比が保たれたままです。

position: absolute; の要素に対して行っていること

デモではカンプの横幅が 960px のデザインがあると仮定しています。
カンプ上には横幅 400px で高さ 400px の要素があるとします。

※デモから一部省略しています。
デモのソース画面

$BASE_WIDTH: 960; // デザインカンプの横幅

.c-box {
  position: absolute;
  width: percentage(400 / $BASE_WIDTH); 
  height: 0;
  padding: percentage(400 / $BASE_WIDTH / 2) 0;
}