如何使左右列粘在底部的 3 列布局？答案

【问题标题】：How to have 3 columns layout with left and right column sticky to the bottom?如何使左右列粘在底部的 3 列布局？
【发布时间】：2021-10-21 08:36:35
【问题描述】：

我有一个 3 列布局，在中心列中，当滚动到尽头时，我正在添加内容，就像无限滚动一样。现在我需要在底部获得粘性左右列，但放置 position: sticky, bottom: 0px 对我没有任何作用。我将父高度更改为 100hv 以始终保持视口较高，而不是每次在中间列中添加一些内容时都在增长的高度，但仍然无法正常工作。我可以得到一些想法或基本示例吗？

我想在这个例子中完成这个。

.App {
text-align: center;
}
.topheader {
  background: red;
  width: 100%;
  height: 50px;
}

.box {
  width: 100%;
  height: 200px;
  background: gray;
}

.content {
  width: 100%;
  height: auto;
  display: flex;
}

.left {
  background: blue;
  display: flex;
  flex-direction: column;
  width: 220px;
  height: 100%;
}

.center {
  background: yellow;
  width: 540px;
  height: auto;
}

.right {
  background: green;
  display: flex;
  width: 220px;
  height: 100%;
  flex-direction: column;
}

<!DOCTYPE html>
<html lang="en">
  <head>
    <meta charset="utf-8" />
    <meta name="viewport" content="width=device-width, initial-scale=1" />
    <meta name="theme-color" content="#000000" />
    <meta
      name="description"
      content="Web site created using create-react-app"
    />
    <title>React App</title>
  </head>
  <body>
    <noscript>You need to enable JavaScript to run this app.</noscript>
    <div id="root">
    <div class="App">
      <div class="topheader"></div>
      <div class="content">
        <div class="left">
          <div class="box">1</div>
          <div class="box">2</div>
          <div class="box">2</div>
          <div class="box">2</div>
          <div class="box">2</div>
          <div class="box">stick here at bottom</div>
        </div>
        <div class="center">
          <div class="box">6</div>
          <div class="box">6</div>
          <div class="box">6</div>
          <div class="box">6</div>
          <div class="box">6</div>
          <div class="box">6</div>
          <div class="box">6</div>
          <div class="box">6</div>
          <div class="box">6</div>
          <div class="box">6</div>
          <div class="box">6</div>
          <div class="box">6</div>
        </div>
        <div class="right">
          <div class="box">3</div>
          <div class="box">4</div>
          <div class="box">4</div>
          <div class="box">4</div>
          <div class="box">stick here at bottom</div>
        </div>
      </div>
      </div>
    </div>
</html>

期望的行为是，当我向下滚动并且视口的底部到达左右列的底部（粘在底部）时，左列和右列被粘在那里并继续滚动以查看中心内容。

【问题讨论】：

提供minimal reproducible example 以获取调试详细信息。带有代码行的图片是不能接受的！！
我添加了一个可重现的例子，谢谢。
使用 top: max(calc(100% - 1000px),0px); 和 position sticky 会将它保持在底部（1000px 应该是 div 的高度），也许用一些 javascript？

标签： html css reactjs css-position sticky

【解决方案1】：

使用position: sticky

<div class="container">
   <div class="item shark-1">
     <img src="/images/punk.png" width="100" alt="Sammy the Shark with a pun theme.">
   </div>
   <div class="item shark-2">
      <img src="/images/pony.png" width="100" alt="Sammy the Shark with a magical pony theme.">
 </div>
 <div class="item shark-3">
    <img src="/images/dino.png" width="100" alt="Sammy the Shark with a dinosaur   theme.">
 </div>
 <div class="item shark-4">
   <img src="/images/steampunk.png" width="100" alt="Sammy the Shark with a steampunk theme.">
 </div>
</div>


 CSS:
.container {
  display: flex;
  justify-content: space-around;
  align-items: flex-start;
  border: 2px dashed rgba(114, 186, 94, 0.35);
   height: 400px;
   background: rgba(114, 186, 94, 0.05);
 }

 .item { position: sticky;}
 .shark-1 { top: 0;}
 .shark-2 {top: 4rem;
 .shark-3 { bottom: 1rem; align-self: flex-end;}

【讨论】：