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>