为什么Firefox会以一种隐藏另一个页脚的方式显示底部粘性页脚，而不是其他浏览器呢？
为什么Firefox会以一种隐藏另一个页脚的方式显示底部粘性页脚，而不是其他浏览器呢？
提问于 2020-12-08 13:14:46
这里的第一个问题，我搜索了这个，但找不到有用的东西(很抱歉，我的英语不好，我来自巴西)。
我的目标是有两个脚，一个在另一个上面，第一个有作为小图标的社交媒体链接，另一个有屏幕按钮，但是这个必须跟随滚动，所以它应用了一个粘性类。总之，这是一款适合智能手机使用的角形应用程序。我们正在使用SCSS来设计页面的样式，我创建了两个组件，一个为每个页脚(社交页脚和屏幕页脚，因为有些屏幕将有这两个，而另一些只是后者)。社交页脚组件在Opera Mini (Mobile)、Google Chrome、Microsoft Edge、Midori和Opera (PC)上正确工作，但在Mozilla Firefox上(屏幕页脚隐藏部分社交页脚)：多浏览器中的页脚。
我应用于屏幕页脚将其粘合到底部的CSS是：
.position-sticky {
position: -webkit-sticky;
position: sticky;
}
.bottom-0px {
bottom: 0px;
}回答 1
Stack Overflow用户
回答已采纳
发布于 2020-12-09 12:08:52
在片段上复制错误时，找到了问题的根源。它是一个应用于页脚组件的父标记(div)的“容器”类，它指定“高度:100 to；”。不知为何，Firefox的结果与其他浏览器不同。以下是错误的再现：
function toggleContainer() {
if(document.getElementById("container-tag").classList.contains('container'))
document.getElementById("container-tag").classList.remove('container');
else
document.getElementById("container-tag").classList.add('container');
}html,
body {
width: 100%;
margin: 0px;
padding: 0px;
}
* {
box-sizing: border-box;
}
.width-100 {
width: 100%;
}
.padding-10px {
padding: 10px;
}
.header {
background-color: lime;
}
.content {
background-color: cyan;
}
.display-flex {
display: flex;
}
.flex-direction-column {
flex-direction: column;
}
.flex-1 {
flex: 1;
}
.sticky-footer {
background-color: yellow;
}
.static-footer {
background-color: red;
color: white;
}
.position-sticky {
position: -webkit-sticky;
position: sticky;
}
.bottom-0px {
bottom: 0px;
}
.container {
height: 100vh;
}<html>
<head>
<title>Footers Problem</title>
</head>
<body>
<div id="container-tag" class="container display-flex flex-direction-column">
<div class="header padding-10px">
<h1>Footers Problem</h1>
</div>
<div class="content padding-10px flex-1">
<u><h2>Compare another browser's result with firefox's</h2></u>
<h3>Some content</h3>
<p>Content Content Content Content Content Content Content Content Content Content Content Content Content Content Content.</p>
<h3>Some other content</h3>
<p>Content Content Content Content Content Content Content Content Content Content Content Content Content Content Content.</p>
<h3>Even More content</h3>
<p>Content Content Content Content Content Content Content Content Content Content Content Content Content Content Content. Content Content Content Content Content Content Content Content Content Content Content Content Content Content Content. Content
Content Content Content Content Content Content Content Content Content Content Content Content Content Content. Content Content Content Content Content Content Content Content Content Content Content Content Content Content Content.</p>
<h3>Some content</h3>
<p>Content Content Content Content Content Content Content Content Content Content Content Content Content Content Content.</p>
<h3>Some other content</h3>
<p>Content Content Content Content Content Content Content Content Content Content Content Content Content Content Content.</p>
<h3>Even More content</h3>
<p>Content Content Content Content Content Content Content Content Content Content Content Content Content Content Content. Content Content Content Content Content Content Content Content Content Content Content Content Content Content Content. Content
Content Content Content Content Content Content Content Content Content Content Content Content Content Content. Content Content Content Content Content Content Content Content Content Content Content Content Content Content Content.</p>
<h3>Some content</h3>
<p>Content Content Content Content Content Content Content Content Content Content Content Content Content Content Content.</p>
<h3>Some other content</h3>
<p>Content Content Content Content Content Content Content Content Content Content Content Content Content Content Content.</p>
<h3>Even More content</h3>
<p>Content Content Content Content Content Content Content Content Content Content Content Content Content Content Content. Content Content Content Content Content Content Content Content Content Content Content Content Content Content Content. Content
Content Content Content Content Content Content Content Content Content Content Content Content Content Content. Content Content Content Content Content Content Content Content Content Content Content Content Content Content Content.</p>
<h2>THE END</h2>
</div>
<div class="static-footer padding-10px">
<h4>Static Footer</h4>
<p>Content Content Content Content Content Content Content Content Content Content Content Content Content Content Content tent Content Content Content Content Content Conte.ent Content Content Content ent Content Content Content ent Content Content
Content ent Content Content Content ent Content Content Content ent Content Content Content </p>
<p>Content Content Content Content Content Content Content Content Content Content Content Content Content Content Content tent Content Content Content Content Content Conte.ent Content Content Content ent Content Content Content ent Content Content
Content ent Content Content Content ent Content Content Content ent Content Content Content </p>
</div>
<div class="sticky-footer padding-10px position-sticky bottom-0px">
<h4>Sticky Footer</h4>
<p>Content Content Content Content Content Content Content Content Content Content Content Content Content Content Content.</p>
<button onclick="toggleContainer()">Toggle Container</button>
</div>
</div>
</body>
</html>
页面原文内容由Stack Overflow提供。腾讯云小微IT领域专用引擎提供翻译支持
原文链接：
https://stackoverflow.com/questions/65199645
复制相关文章
相似问题
腾讯云开发者
