【Labs】position:absoluteとwidth:100%を指定すると横幅の設定がうまくいかない場合の対処方法について

こんにちは（・∀・）

CSSでposition:absoluteとwidth:100%を指定すると横幅の設定がうまくいかない場合があります。そんな場面に出くわしてしまった場合どうすれば良いのか...

などと、そんな場面での対処方法についてご紹介します。

また、この問題はbox-sizingで簡単に対処できるということを教えていただきました。デモのリンクも掲載させていただきましたのでご覧ください。

%指定の横幅を親要素に合わせたい

次のような指定をすると...

要素.hakoにposition:absoluteとwidth:100%を指定。

HTML

<div class="oya-youso">
<div class="hako">
hako
<!--hako--></div>
<!--oya-youso--></div>

CSS

.oya-youso{
  width: 400px;
  height: 200px;
}
.oya-youso .hako {
  position: absolute;
  width: 100%;
}

Result

要素.hakoが親要素.oya-yousoからはみ出してしまいます。

ではどのような指定だとうまくいくの...？

HTML

<div class="oya-youso">
<div class="hako">
hako
<!--hako--></div>
<!--oya-youso--></div>

CSS

.oya-youso {
  width: 400px;
  height: 200px;
  background: lightgray;
  position: relative;
}
.oya-youso .hako {
  width: 100%;
  position: absolute;
  background: lightblue;
}

Result

.oya-yousoにposition:relativeを指定します。するとposition:absoluteを指定している要素.hakoの横幅は要素.oya-yousoの範囲内に収まります。

こちらのサンプルは.oya-yousoに直接position:relativeを指定する仕様に変更しました。それによってムダに要素を増やさなくてよくなります。

横paddingを指定したい

要素.hakoに横paddingを指定したい場合は...❓

通常要素にwidth:100%の指定をして横paddingを指定するとpadding分横幅は大きくなってしまいます。ブロック要素は横幅100%に設定されているのでwidthの指定を省略することができます。widthの指定を省略しているブロック要素にpaddingを設定すると、横幅100%で横paddingを設定することができます。しかし今回のサンプルのように要素にposition:absoluteが指定してあると横幅の省略はできなくなるので要素.hakoに直接paddingの設定をすることはできません。

HTML

<div class="oya-youso">
<div class="hako">
hako
<!--hako--></div>
<!--oya-youso--></div>

CSS

.oya-youso {
  width: 400px;
  height: 200px;
  background: lightgray;
  position: relative;
}
.oya-youso .hako {
  width: 100%;
  background: lightblue;
  position: absolute;
}

Result

ではどのような指定だとうまくいくの...？

HTML

<div class="oya-youso">
<div class="hako">
<div class="hako-inner">
hako
<!--hako-inner--></div>
<!--hako--></div>
<!--oya-youso--></div>

CSS

.oya-youso {
  width: 400px;
  height: 200px;
  background: lightgray;
  position: relative;
}
.oya-youso .hako {
  width: 100%;
  background: lightblue;
  position: absolute;
}
.oya-youso .hako .hako-inner {
  padding: 10px;
}

Result

なので要素.hakoに子要素.hako-innerを作ってそちらにpaddingを指定します。

上記の親要素に直接position:relativeを指定するのとCSS3のbox-sizingを使用すれば要素(.hako-inner)を増やすことなく簡単にpaddingを子要素に設定することができます、というご指摘を@nayucolonyさんからいただきました。ありがとうございます。

CSS3のbox-sizingが使えると要素のpaddingとborderの計算をしなくてよくなりますので横幅の指定が簡単になります。

HTML

<div class="oya-youso">
<div class="hako">
hako
<!--hako--></div>
<!--oya-youso--></div>

CSS

.oya-youso {
  width: 400px;
  height: 200px;
  background: lightgray;
  position: relative;
}
.oya-youso .hako {
  width: 100%;
  background: lightblue;
  position: absolute;
  padding: 10px;
  box-sizing: border-box;
}

Result

この方法であれば余計な要素を増やすことなく子要素に直接paddingの設定ができます。

関連リンク

【CSS3リファレンス】box-sizing
【CSS3リファレンス】width
【CSS3リファレンス】position
【CSS3リファレンス】padding