はじめに
チャットアプリを作成する際、ヘッダーとフッターを固定したままチャットの画面を収めようとした時、
中々うまくいかなかったので記事にしようと思いました。
今回の問題
私が実装したかったこと
- ヘッダーをフッターを画面に固定
- チャットの画面を隠れないように見せたい
ですが、CSSはどこが原因になっているかパッと見ではわからなくて、最初どこが問題か全然わかりませんでした。💦
解決方法
問題の原因は下記でした。
classname="h-[100dvh]"
このCSSをlayoutの方にも、チャットcomponentにも使用してしまっていたのが問題でした。💦
Talk画面はmainの中にあるのに、更に画面の高さ100vhを入れてしまっており、ヘッダー部分と重なってしまうことが問題でした。
そのため、チャットcomponentは main にピッタリ合わせれば良いだけなので、
layoutには → h-[100dvh]
mainには → h-full
まとめ
CSSはややこしくて、ほんとにどこが原因でUIが整わないのかわからなくなってしまいます。
レイアウトは外側から階層構造に考えていくと理解しやすいと出てきたので、これからはもっと意識しようと思います。