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

Question

我的布局由 1 个 header 和 3 个垂直面板构成。所有垂直面板都可以水平 expanded/contracted 并且需要一起填满页面的 100% 宽度。面板还需要在 header 之后占据垂直 space 的 100%（header 具有自动高度）。

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

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

如果我使用 position:sticky 效果很好，但不受 Chrome/Opera 支持，因此不是一个选项。如果我使用 javascript，我会在 contracting/expanding 时遇到其他问题，因为它们也有动画，而且看起来很糟糕。虽然我可以让它工作，但 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>

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

CSS position sticky cross browser solution

css

flexbox

css-position

sticky