时间戳

首页 > 解决方案 > 如何使左右列粘在底部的 3 列布局？

html - 如何使左右列粘在底部的 3 列布局？

问题描述

我有一个 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>

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

标签： htmlcssreactjscss-positionsticky

解决方案

使用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;}

推荐阅读