CSS位置粘跨浏览器解决方案

Question

我的布局由 1 个标题和 3 个垂直面板组成。 所有垂直面板都可以水平扩展/收缩，并且需要一起填充 100% 的页面宽度。面板还需要在页眉之后占据 100% 的垂直空间（页眉具有自动高度）。

每个面板本身都需要可滚动，而不需要滚动整个页面或影响页面上其他面板的位置。

我面临的问题是面板既需要作为水平相对定位（以便它们一起填充 100% 宽度），又需要作为垂直固定定位，以便它们在滚动时保持原位。

如果我使用position:sticky，效果很好，但不受 Chrome/Opera 支持，因此不是一个选项。 如果我使用 javascript，我在收缩/扩展时会遇到其他问题，因为它们也有动画，而且看起来很糟糕。虽然我可以让它工作，但 Javascript 根本不是我想要的解决方案。 我正在尝试为它找到一个纯 CSS 跨浏览器解决方案。

重要的是每个面板保持可滚动而不滚动整个页面，当然还有“粘性”行为。

我不是 CSS 专家，所以我可能缺少一个简单的解决方案。 谢谢。

Answer 1

这是一种方法，使用flexbox

html, body {
  margin: 0;
  height: 100%;
}

.flexwrapper {
  height: 100%;
  display: flex;
  flex-direction: column;
}

.flexheader {
  flex: 0;
  padding: 10px;
  background: #f93;
  text-align: center;
}

.flexcontent {
  flex: 1;
  display: flex;
}

.flexinner {
  flex: 1;
  background: #09f;
  margin: 1px;
  position: relative;
}

.absscroll {
  position: absolute;
  left: 0;
  top: 0;
  right: 0;
  bottom: 0;
  overflow: auto;
}

<div class="flexwrapper">

  <div class="flexheader">
    Header
  </div>

  <div class="flexcontent">

    <div class="flexinner">
      <div class="absscroll">

      </div>
    </div>

    <div class="flexinner">
      <div class="absscroll">
Bla bla<br>
Bla bla<br>
Bla bla<br>
Bla bla<br>
Bla bla<br>
Bla bla<br>
Bla bla<br>
Bla bla<br>
Bla bla<br>
Bla bla<br>
Bla bla<br>
Bla bla<br>
Bla bla<br>
Bla bla<br>
Bla bla<br>
Bla bla<br>
Bla bla<br>
Bla bla<br>
Bla bla<br>
Bla bla<br>
Bla bla<br>
Bla bla<br>
Bla bla<br>
Bla bla<br>
Bla bla<br>
      </div>
    </div>
    
    <div class="flexinner">
      <div class="absscroll">

      </div>
    </div>

  </div>

</div>