位置:粘性，适用于Chrome，但不适用于Firefox [英] position: sticky, works in Chrome but not in Firefox

问题描述

我需要有一个垂直的父高div，其中包含较小的div.如果有多余的空间，则除最后一个div之外的所有div都应放置在顶部，而最后一个div则应放置在底部.我已经用Bootstrap和flex实现了它.

I need to have a vertical parent-height div which contains smaller divs. In case there's extra space, all but the last divs should be placed on top, and the latest div should be placed at the bottom. I've implemented it with Bootstrap and flex.

现在，我认为，如果可能的话，底部div将位于视口的底部而不是包含div的底部，那将是很好的选择.我已经使用 position:sticky 实现了它，并且它在Chrome上有效，但在Firefox中不起作用(两者都应支持 position:sticky ).

Now I thought that it would be nice if, when possible, the bottom div will be at the bottom of the viewport instead of at the bottom of the containing div. I've implemented it with position: sticky, and it works on Chrome but not in Firefox (both should support position: sticky).

我的代码:

<div id="container" class="d-flex flex-column">
    <div class="flex-item">1</div>
    <div class="flex-item">2</div>
    <div class="d-flex flex-column last">
      <div class="flex-item mt-auto last-inner">3</div>
    </div>
</div>

CSS:

#container {
    height: 1000px;
}

#container .last {
    flex: 1;
}

#container .last-inner {
    position: sticky;
    bottom: 0;
}

JSFiddle

JSFiddle

推荐答案

sticky 似乎很棘手，并且尚未在各处实现相同的方式.

sticky seems to be tricky and not yet implemented the same way everywhere.

我通常相信FF在这种行为上的表现，Chrome在过去的3年中添加了一些粘性问题，并将其删除了几次，我很高兴它在chrome中再次可用，而且每个月都可用.

对于FF，sticky元素必须是#container的直接子元素，否则，它将粘贴在 .last 是flex子元素的底部0.作为flex子级，它将成为协调的 bottom:0 而不是body的第一个父级引用. #container 显然没有格式设置上下文，并且html可以作为引用.

For FF, the sticky element has to be a direct child of #container, else, it will stick at bottom 0 of .last being a flex child. being a flex child, it becomes the first parent reference for the coordonate bottom:0 instead body. #container has obviously no formatting context and html can be the reference.

#container {
  height: 1000px;
}

#container .last {
  flex: 1;
}

#container .last-inner {
  position: sticky;
  bottom: 0;
}

.flex-item {
  background: tomato;
  padding: 5px;
  width: 200px;
  height: 50px;
  margin-top: 10px;
  line-height: 50px;
  color: white;
  font-weight: bold;
  font-size: 2em;
  text-align: center;
}

<link href="https://stackpath.bootstrapcdn.com/bootstrap/4.0.0/css/bootstrap.min.css" rel="stylesheet"/>
<div id="container" class="d-flex flex-column">
  <div class="flex-item">1</div>
  <div class="flex-item">2</div>
  <div class="d-flex flex-column last">
  </div>
  <div class="flex-item mt-auto last-inner">3</div>
</div>

这篇关于位置:粘性，适用于Chrome，但不适用于Firefox的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！