Jqueryのcss変更について

Question

現在webサイトを製作中で何個かセクションがあるのですが、そのうちの一つのセクションに背景アニメーションを付けたいと思っております。
そのセクションのコンテンツとアニメーションにposition:absolute を使用し、重ねようと思っているのですが親要素の高さがなくなってしまうためJqueryで親要素にコンテンツの高さを取得して設定しようとしたり、その次のセクションにコンテンツの高さ分のmargin-topを付けようとしましたがどちらもresizefunctionは機能するのですが通常のfunctionやloadfunctionが機能せず画面幅を変えないと解決しない状況です。
background-colorなどはできたようなのですがなぜなんでしょうか。

Comments

[2KOH]

> Jqueryで親要素にコンテンツの高さを取得して設定しようとしたり、その次のセクションにコンテンツの高さ分のmargin-topを付けようとしましたが

実際に試したのであれば、そのコードを提示してください。

[yambejp]

なんとも言えませんがflexで処理する案件かもしれません
より具体的にHTMLと期待する挙動を命じください

Answer 1

もし画面幅にかかわらずセクションの高さが変わらない場合ですと、
親要素にmin-heightで最低限の高さを与える方法でよいような気がします。

もし画面幅に応じてセクションの高さが変わる場合は、
ちょっとトリッキーですが疑似要素とpadding-topを組み合わせて高さを与える方法があります。
https://qiita.com/nknkt/items/065b30bbdc1f6508a6f7

jQueryでfunctionが動かない理由はちょっとわからなかったですが、
resizeが動くということは単純に記載が間違っている可能性が高い気がします。
console.logなどを入れてみて関数がそもそも実行できているかデバックしてみるとよいかと思います。

Comments

[roim]

console.logは普通に動くんですよね...

[tsuyo_244]

なるほど、、console.log($('.hoge').height());
みたいにした場合はちゃんと意図した高さが取得できますか？

resizeで上手くいくけどloadだと上手くいかない場合、
イベントの実行タイミングの差が原因のように思われるのですが...