positionのabsolute指定で親要素の高さが潰れてしまったときの対処法。

positionを多用してレイアウトしていると親BOXの高さが潰れてしまうことがよくありますね。デザイン上問題なければそのまま放ったらかしにしてもよいのですが、CSSなどで親要素を装飾したい場合はしっかり高さを復活させてあげましょう。

基本的にはCSSで親要素の高さを指定すればいいですが、小要素の高さが変動したり、レスポンシブなどで配置が変わったりする場合に対しては通常の指定方法だと対応できません。そんなときはjQueryで簡単に解決することができます。

 

jQueryで潰れた親要素の高さを復活させる方法

 

例えば次のような場合。

[HTML]

[code language=”html”]
<div class="parentBox">
<div class="childBox">Box</div>
</div>
[/code]

[CSS]

[code language=”css”]
.parentBox{
position:relative;
width:100%;
border:solid 1px #f00;
}
.childBox{
position:absolute;
height:100px;
background-color:#0f0;
}
[/code]

[RESULT]

[wp-js-fiddle url=”http://jsfiddle.net/ikorih/acc4q/” style=”width:100%;height:200px;border:solid #4173A0 1px;”]

上記のように小要素である childBox に{position:absolute}を指定してるので、親要素であるparentBoxの高さは0になってしまいます。
そこで、次のコードを記入しましょう。jQueryの読み込みを忘れずに。

[JavaScript]

[code language=”javascript”]
$(function(){
var biggestHeight = "0";
$(".parentBox *").each(function(){
if ($(this).height() > biggestHeight ) {
biggestHeight = $(this).height()
}
});
$(".parentBox").height(biggestHeight);
})
[/code]

[RESULT]

[wp-js-fiddle url=”http://jsfiddle.net/ikorih/xrjdL/” style=”width:100%;height:200px;border:solid #4173A0 1px;”]

これで潰れていた親BOXの高さが復活します。

1件のコメント

Leave a Comment.