positionのabsoluteで親要素の高さがつぶれたときにつかえるjavascript
ここ最近、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);
})
