Question

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

现在，我认为，如果可能的话，底部div位于视口的底部而不是所在div的底部，那将是很好的选择。我已经用position: sticky实现了它，它可以在Chrome上运行，但不能在Firefox中使用（两者都应支持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

Answer 1

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

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

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

#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

1 个答案: