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" 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;
}
.wrap{ overflow:hidden; }
-->
</style>
</head>
<body>
<div class="wrap">
<div class="menu"></div>
<div class="contents"></div>
</div>
<div class="footer"></div>
</body>
</html>
コメント
コメントを投稿