positionのabsoluteで親要素の高さがつぶれたときにつかえるjavascript

FRONTEND

2019.03.26

ここ最近、WEBのデザインではノングリッドデザイン、ブロークングリッドデザインが流行っているとされています。要するに、これまでのグリッドでしっかりと仕切られたデザインではなく、一つ一つの要素を自由に配置するというデザイン手法のことです。

サイトやページに個性を出したい際に多用されているようですが、グリッドデザインよりも配置のバランスやホワイトスペースの使い方等に気を付けないと、仕上がりが微妙なものになってしまう恐れはあります。それでもその辺りを考えてセンス良くデザインされたサイトやページは雑誌っぽい雰囲気もあったりして、かっこいいものが多いです。

そんなノングリッドデザインやブロークングリッドデザインを用いて作られたページをコーディングする際、僕はpositionをつかいます。このposition、使い方を覚えれば表現の幅もかなり広がって便利なCSSなんですが、意外と曲者。中でもよくあるのがposition:absoluteにしたとき、親要素の高さがつぶれてしまう問題。
高さを〇〇pxと決め打ちすれば問題無いのですが、レスポンシブデザイン全盛の時代、後々面倒臭いことになるのは明白なのでそれは避けたい。

前置きが長くなってしまいましたが、今回はそんなときに使える、positionのabsoluteでつぶれてしまった親要素の高さを有効にするjavascriptについてです。

positionのabsoluteでつぶれた親要素の高さを有効にするjavascriptの実装例

HTML

例としてHTMLは次のようにします。

<div class="parent">
     <div class="child">sample</div>
</div>

CSS

CSSは次のように記述します。

.parent{
     position:relative;
     width:100%;
     border:solid 1px #000;
}
.child{
     position:absolute;
     height:100px;
     background-color:#ddd;
}

javascript

で、jabvascriptは下記のように。jQuery必須です。

<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.2.1/jquery.min.js"></script>
<script>
$(function(){
    var biggestHeight = "0";
    $(".parent *").each(function(){
        if ($(this).height() > biggestHeight ) {
            biggestHeight = $(this).height()
        }
    });
    $(".parent").height(biggestHeight);
})
</script>

結果は次のようになります。

<div class="parent">
     <div class="child">sample</div>
</div>
.parent{
     position:relative;
     width:100%;
     border:solid 1px #000;
}
.child{
     position:absolute;
     height:100px;
     background-color:#ddd;
}
$(function(){
    var biggestHeight = "0";
    $(".parent *").each(function(){
        if ($(this).height() > biggestHeight ) {
            biggestHeight = $(this).height()
        }
    });
    $(".parent").height(biggestHeight);
})