absoluteの親要素が子要素より小さい時の対処

cssって奥が深いですよね。

ほんのちょっと凝ったデザインにしたい時は、postion:absolute　と　position:relative　を使っていい感じにしたいですよね。

例えば、キャクヨセの運営者概要では、以下のように黒い背景と白い背景が重なり合うようにpositionを設定しています。

親要素の黒い背景が

    position: absolute;
    background-color: black;
    top: -60px;
    left: 0;
    width: 45%;
    height: 100%;
    max-height: 550px;

子要素の白い背景が

    width: 85%;
    background: white;
    box-shadow: 0 0 8px grey;
    position: relative;
    margin: 100px 0 0 auto;
    text-align: left;
    padding: 35px;

こんな感じになっています。

黒い背景が left:0 で左寄せに

白い背景が margin: 100px 0 0 auto; で右寄せになっているので簡単な重ね合わせですが、

もし、親要素が子要素より小さいと、子要素がrelativeなので

おそらく子要素と次の要素が重なってしまうと思います。

それを解決させるには、親要素を子要素より高さを大きくしなければいけません。

子要素がwidth:100%としたら、height:auto だと親要素の高さをheight:autoや100%にしてもうまく行きませんよね？

なので、力技になりますが、jQueryで子要素の高さを取得して、親要素にあてがうことをオススメします。コードとしては以下です。

$(window).on('load',function(){
 $("親要素クラス").height($("子要素クラス").height());
});
Code language: JavaScript (javascript)

$(window).on(‘load’,function(){　で囲うことで、ページ読み込み時にheightを調整してくれます。

window幅が変わったときは、対応しきれていないので、そんな時はこれも必要です。

$(window).resize(function() {	
 $("親要素クラス").height($("子要素クラス").height());
});
Code language: JavaScript (javascript)

これでうまくいくと思います。ぜひ、ご参考ください！

　

キャクヨセへのお仕事依頼はこちらからよろしくお願いいたします！