position: fixed; でメニューを固定したら親要素からはみ出る問題の対処法
カテゴリ:PC
親要素の幅を変数に保存しておき、calc で計算して対処する。
幅の計算
親要素の幅が --outer-width だとする。このとき、max-width を設定することで、幅を親と同じにする。
{ position: fixed; bottom: 0; margin: 0 auto; width: 100%; max-width: var(--outer-width); }
left の計算
ウインドウサイズは 100% で取得できるので、計算によって left を設定する。
{ position: fixed; bottom: 0; margin: 0 auto; width: 100%; max-width: var(--outer-width); left: calc((100% - var(--outer-width)) * 0.5); }
スマホ対応
スマホのような max-width 未満スクリーンでは要素が貫通するので、@media で CSS を切り替える。
@media (max-width: 900px) { .bottom-fixed { position: fixed; bottom: 0; margin: 0 auto; width: 100%; max-width: var(--outer-width); left: 0; } } @media (min-width: 901px) { .bottom-fixed { position: fixed; bottom: 0; margin: 0 auto; width: 100%; max-width: var(--outer-width); left: calc((100% - var(--outer-width)) * 0.5); } }