Свойство CSS «содержать: макет» делает фиксированный нижний колонтитул неработающим - PullRequest
0 голосов
/ 05 ноября 2018

Я работаю над приложением Ionic 4, и у меня возникла странная проблема с нижним колонтитулом с фиксированной позицией внутри класса .scroll-content. Я мог бы воспроизвести это без Ionic, поэтому я задаю вопрос в более общем смысле:

У меня есть элемент контейнера (предоставленный Ionic в моем случае), который имеет:

.scroll-content {
    overflow-y: scroll; 
    position: absolute;
    contain: layout size style;
}

Плюс некоторые верхние / нижние / левые / правые значения для позиционирования, они не влияют на проблему.

Внутри него есть содержимое, которое выше этого контейнера, в результате чего контейнер прокручивается, и нижний колонтитул, который я сделал липким с position: fixed.

Однако нижний колонтитул не ведет себя так, как будто он вообще липкий, если я не удаляю значение "layout" из свойства contain.

let layout = true;
const container = document.querySelector('.scroll-content');

document.getElementById('toggleLayout').addEventListener('click', (e) => {
    layout = !layout;
    if(layout) container.style.contain = 'size style layout';
    else container.style.contain = 'size style';
    
    e.target.innerHTML = `layout: ${layout}`;
});
.scroll-content {
	contain: layout size style;
	left: 0;
	right: 0;
	top: 0;
	bottom: 0;
	position: absolute;
	overflow-y: scroll;
}

li {
  border-bottom: 1px solid #ddd;
  list-style: none;
  padding: 10px;
}

footer {
  background: #eee;
  bottom: 0;
  padding: 20px;
  position: fixed;
  width: 100%;
}
<div class="scroll-content">
<button id="toggleLayout">layout: true</button>
    <ul>
      <li>a</li>
      <li>b</li>
      <li>c</li>
      <li>d</li>
      <li>e</li>
      <li>f</li>
      <li>g</li>
      <li>h</li>
      <li>i</li>
      <li>j</li>
      <li>k</li>
      <li>l</li>
      <li>m</li>
      <li>n</li>
      <li>p</li>
      <li>o</li>
      <li>q</li>
      <li>r</li>
      <li>s</li>
    </ul>
    <footer>Footer</footer>
</div>

Пока я хотел бы предположить, что Ионик добавил этот класс с целью, поэтому я предпочитаю не переопределять его. Ожидается ли нарушенное поведение position: fixed? Если так, что я могу сделать, чтобы обойти это и снова исправить мой нижний колонтитул?

Добро пожаловать на сайт PullRequest, где вы можете задавать вопросы и получать ответы от других членов сообщества.
...