divの領域を親要素のめいいっぱいまでpositionで広げるCSSの小技

公開: 2013-04-23 08:58
更新: 2016-04-29 06:02
今回はCSSのちょっとした小技です。

「あの、この、そのサイズをめいいっぱいに広げたい!」
(※正しい日本語は「めいっぱい」らしい

なんてことよくあるかと思います。

つまりこんな状態
なんかよくわからない薄い緑色のやーつが親のdiv要素で、
その中にさらによくわからない緑なのか青なのかはっきりしないのが子要素です。

コードに示すとこんな感じです。

HTML
<div id="wrapper">
        <div id="inner">
</div>
</div>
CSS
#wrapper {
        width: 360px;
        height: 200px;
}
#inner { }
分かりやすいように親には#wrapperを子には#innerとidを振っておきまます。

さてここで子要素のサイズを
親要素いっぱいにしたいわけですがどうしましょう。
答の一つとして子の方のheightを100%にすることが挙げられるでしょう。

CSS
#wrapper {
        width: 360px;
        height: 200px;
}
#inner {
        height: 100%;
}
OKですね。
これと同じことをpositionを上手く使うことで実現できます。
ずばりコードはこうです。

CSS
#wrapper {
        position: relative;
        width: 360px;
        height: 200px;
}
#inner {
        position: absolute;
        top: 0;
        right: 0;
        bottom: 0;
        left: 0;
}
まず親要素のpositionがもともとabsoluteでない場合はrelativeにします。
もともとabsoluteの場合は変更しません。

次に子要素方のpositionをabsoluteにします。
そしてtop,right,bottom,leftのすべてに0を指定します。

すると...
子要素が全体に広がりました♪
「top,bottom」と「left,right」は同時に指定できないと思っている人が結構いるみたいですが、全然アリなのです♪
(ぇ?知ってた?

「とりあえずheighを100%にすりゃいいじゃーん」

確かに、この場合だとそうですが、
例えば「親要素の縦横が半分の大きさの子要素を親要素の中央に配置する」などという場合にはこの方法が役に立つかと思います。

これを実現するには下のようなコードになります。

HTML(忘れそうだからもう一度同じやつ)
<div id="wrapper">
        <div id="inner">
</div>
</div>
CSS
#wrapper {
        position: relative;
        width: 360px;
        height: 200px;
}
#inner {
        position: absolute;
        top: 25%;
        right: 25%;
        bottom: 25%;
        left: 25%;
}
するとこうなります。
コードもシンプルで読みやすいです。
top,right,bottom,leftで要素の4点を定めるって覚えるといいカモです。

これは応用力がありますぞ♪
ではでは♪

この記事をシェア
この記事にコメントする
書き込む
あっきぃ(@appstars_aki)
Web、iOSなフリーランサーです。好きなものはお寿司です。でもお寿司は高いので普段は雑草とか拾ったドングリを食べています。お仕事や意味もなく毎月お小遣いをくれる人を探してます。

お仕事の依頼や自分で作ったアプリのレビューを希望しちゃう方はaki@appstars.jpまでご連絡ください。