позиция: липкая, работает в Chrome, но не в Firefox - PullRequest
Новая
       51

позиция: липкая, работает в Chrome, но не в Firefox

0 голосов
/ 02 сентября 2018

Мне нужно иметь вертикальный 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

1 Ответ

0 голосов
/ 02 сентября 2018

sticky кажется хитрым и еще не реализованным везде одинаково.

Я обычно доверяю FF в этом поведении, Chrome добавляет проблемы с липкой и удаляет ее пару раз за последние 3 года, я рад, что она снова доступна и на месяц в Chrome.

Для FF липкий элемент должен быть прямым потомком #container, иначе он будет придерживаться в нижней части 0 .last , являясь гибким потомком . будучи гибким потомком, он становится первой родительской ссылкой для координаты bottom:0 вместо тела. #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>
...