Firefoxで一番下のstickyが上に引っ張られて下に無用なスペースが発生する問題の解決策
やりたかったこと。 ５番目の図で下にスペースが生じたので、その原因を探るための単純化したソース。 <!DOCTYPE html> <html lang="ja"> <head> <meta charset="utf-8"> <meta name="viewport" content="width=device-width,initial-scale=1"> <title>メニュー</title> <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> </head> <body> <div class="menu"></div> <div class="contents"></div> <div class="footer"></div> </body> </html> 「教えて!goo」 で教えてもらった解決策。 <!DOCTYPE html> <html lang="ja"> <head> <meta charset="utf-8"> <meta name="viewport...