弹性容器内的固定位置侧边栏

Question

我有一个布局，它使用 flexbox 将主要内容部分和侧边栏元素放置在彼此旁边，justify-content: space-between 用于在容器内保持一致的间距，但是我需要右侧的侧边栏也可以滚动使用 position: fixed 与用户一起向下移动页面，同时还保持固定在容器的右边缘。

示例笔：https://codepen.io/StyleMeLikeOneOfYourFrenchGirls/pen/BazQOLj

.container {
  width: 1000px;
  margin: auto;
  border: 1px solid black;
}

.content {
  display: flex;
  justify-content: space-between;
}

.left-content {
  height: 1000px;
  width: 70%;
  background-color: red;
}

.right-sidebar {
  height: 200px;
  width: 20%;
  background-color: yellow;
  /*position: fixed;*/
}

<div class="container">
  
  <div class="content">
    <div class="left-content">
    left content
    </div>
    
    <div class="right-sidebar">
    right sidebar
    </div>
  </div>
</div>

我知道 fixed 从文档流中删除元素，从而消除了 flex 布局的简单性和 'contain' 其父元素中的某些内容的能力。

我已经能够实现接近我想要的东西，但它需要不同视口宽度的特定值（例如使用 Bootstrap 的 offset 类，transform: translateX() 或边距的各种组合）。虽然这些方法很混乱，并且没有提供一致的解决方案来保持侧边栏与父容器的边缘对齐。

这个问题有simpler/more优雅的解决方案吗？

Answer 1

请看...

body {
  margin: 0;
}
.container {
  width: 1000px;
  display: block;
  margin: 0 auto;
}
.content {
  background: #999;
  height: 100vh;
  overflow: auto;
  display: flex;
}
.leftContent {
  display: flex;
  width: calc( 100% - 300px );
}
.rightSidebar {
  position: absolute;
  right: calc(50% - 500px);
  background: #666;
  height: 100vh;
  width: 300px;
  overflow: auto;
}

<div class="container">
  <div class="content">
    <div class="leftContent">
      a a a a a a a a a a a a a a a a a. a a a a. a a a a a a a a. a a a a a a a aa. a a       a a a a a a a a a a a a a a a a a. a a a a. a a a a a a a a. a a a a a a a aa. a aa<br>a<br>a<br>a<br>a<br>a<br>a<br>a<br>a<br>a<br>a<br>a<br>a<br>a<br>a<br>a<br>a<br>a<br>a<br>a<br>a<br>a<br>a<br>a<br>a<br>a<br>a<br>a<br>a<br>a<br>a<br>a<br>a<br>a<br>a<br>a<br>a<br>a<br>a<br>a<br>a<br>a<br>a<br>a<br>a<br>a<br>a<br>a<br>a<br>a<br>a<br>a<br>a<br>a<br>a<br>a<br>a<br>a<br>a<br>a<br>a<br>a<br>a<br>a<br>a<br>a<br>a<br>a<br>a<br>a<br>a<br>a<br>a<br>a<br>a<br>a<br>a<br>a<br>a<br>a<br>a<br>a<br>
      
    </div>
    <div class="rightSidebar">
      b<br>b<br>b<br>b<br>b<br>b<br>b<br>b<br>b<br>b<br>b<br>b<br>b<br>b<br>b<br>b<br>b<br>b<br>b<br>b<br>b<br>b<br>b<br>b<br>b<br>b<br>b<br>b<br>b<br>b<br>b<br>b<br>b<br>b<br>b<br>b<br>b<br>
    </div>
  </div>
</div>

Answer 2

您可以使用 position: sticky;。尊重弹性，有固定用途

演示：

.container {
  width: 1000px;
  margin: auto;
  border: 1px solid black;
}

.content {
  display: flex;
  justify-content: space-between;
}

.left-content {
  height: 1000px;
  width: 70%;
  background-color: red;
}

.right-sidebar {
  height: 200px;
  width: 20%;
  background-color: yellow;
  position: -webkit-sticky;
  position: sticky;
  top: 0;
}

<div class="container">
  
  <div class="content">
    <div class="left-content">
    left content
    </div>
    
    <div class="right-sidebar">
    right sidebar
    </div>
  </div>
</div>

Answer 3

这是对您的代码影响最小的尝试。您的设置会限制您的选项，但我认为下面的 Pen 将是一个很好的解决方法。

.left-content {
  height: 1000px;
  width: 100%;
  max-width: 70%;
  background-color: red;
}

.right-sidebar {
  height: 200px;
  width: 100%;
  max-width: 15%;
  background-color: yellow;
  position: fixed;
  right: 20%;
}

CodePen

右侧的边栏通过使用 position: fixed 与用户一起向下滚动页面，同时还保持固定在容器的右边缘。

弹性容器内的固定位置侧边栏

Fixed position sidebar within a flex container

html

css

layout

position

flexbox

演示：