代码之家 › 专栏 › 技术社区 › Stephan Muller

CSS属性“contain:layout”使固定页脚不起作用

css-contain sticky-footer css-position css

2

Stephan Muller · 技术社区 · 7 年前

我正在开发一款Ionic 4应用程序,遇到了一个奇怪的问题,在它们的内部有一个固定位置的页脚 .scroll-content

我有一个容器元素(在我的例子中由爱奥尼亚提供),它有:

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

加上一些top/bottom/left/right值来定位它,它们不会影响问题。

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>

现在我想假设Ionic添加这个类是有目的的,所以我不想重写它。坏了吗预期的行为?如果是这样的话,我能做些什么来解决它,并使我的页脚再次修复?

0 回复 | 直到 7 年前