詳しい人求む！

Firefoxで一番下のstickyが上に引っ張られる。

解決済

質問者：いしい
質問日時：2021/04/13 15:51
回答数：2件

上から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は固定できません。

よろしくお願いします。

<style>
.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;
}
</style>
<body>
<div class="menu"></div>
<div class="contents"></div>
<div class="footer"></div>
</body>

通報する

この質問への回答は締め切られました。

質問の本文を隠す

回答 (2件)

ベストアンサー優先
最新から表示
回答順に表示

No.1ベストアンサー

回答者： fujillin
回答日時：2021/04/13 16:37

こんにちは

contents部分がmenuより上にはいかないと仮定して・・・
空きの部分は無いものとして計算させればよいのでは？

<div class="wrap">
<div class="menu">menu</div>
<div class="contents">contents</div>
</div>
<div class="footer">footer</div>
などとしておいて、

.wrap{ overflow:hidden; }
を追加するとかではいかがでしょうか？
（fx 86.0で確認）