質問: firefoxで一番下のstickyが上に引っ張られる。 上からmenu、contents、footerのhtmlソースで、 contentsを"position:relative; top:-200px;"で上に200px移動させたら下のfooterとの間に隙間ができました。 この隙間を埋めるためにcontentsに"margin-bottom:-200px;"を追加したらfooterとの隙間は埋まりましたが、footerの下に隙間ができてしまいました。 contentsに"margin-bottom:-200px;"を追加する代わりにfooterに"margin-top:-200px;"を追加しても同じです。 contentsを上に200px移動させるために"position:relative; bottom:200px;"を使っても同様です。 下記のソースでfirefoxで確認しました。 chromeでは再現しませんでした。 firefoxはver.87.0です。 firefoxでの動作は諦めるしかないのでしょうか? 目的はcontentsとfooterの間に隙間を作らず、かつ、footerの下に隙間を作らないことです。 ”position:sticky;”ではなく"position:fixed;"も試しましたが、contentsとfooterの間に隙間ができてしまいました。bodyのheightを固定すれば目的は達成できますが、実際のソースではbodyのheightは固定できません。 よろしくお願いします。 .menu{width:300px;height:400px;background-color:red;} .contents{width:300px;height:1000px;background-color:blue;border-radius:50%;} .footer{width:300px;height:50px;background-color:red;} .footer{ position:sticky; bottom:0;left:0; } .contents{ position:relative; top:-200px; margin-bottom:-200px; }
回答: こんにちは contents部分がmenuより上にはいかないと仮定して・・・ 空きの部分は無いものとして計算させればよいのでは? menu contents footer などとしておいて、 .wrap{ overflow:hidden; } を追加するとかではいかがでしょうか? (fx 86.0で確認)