固定在 flex 侧边栏上的位置答案

【问题标题】：Position fixed on flex sidebar's固定在 flex 侧边栏上的位置
【发布时间】：2018-02-17 16:26:07
【问题描述】：

我正在处理一个 3 列的页面，一个左右侧边栏，一个中间部分。

当我向下滚动页面时，我不想修复两个侧边栏 - 只有主边栏应该移动。

这是每个侧边栏的代码（它们是相同的）-

.sidebar {
width: 19%;
background-color: white;
order: 3;
padding-right: 34px;
}

这是可滚动的中间部分-

.site-main{
flex: 1;
order: 2;
background: #eee;
}

需要注意的是页面包装设置为display:flex

position:fixed 没有做到这一点。这是codepen

【问题讨论】：

你应该在你的问题中发布你的代码。
您的 codepen 中没有任何 position: fixed; 元素，无论如何您都不应该为此使用 flexbox。旁白：20% 宽度，固定，左/右：0。主列：60% 宽度，边距 0 自动；

标签： html css flexbox css-position

【解决方案1】：

您需要将两个侧边栏设置为固定，使高度为 100%。第二个侧边栏需要正确的 0，因此它位于右侧。需要 z-index，这样它就不会位于您的页脚之上。 Main 需要 margin-left 和 margin-right 所以它不会被你的第一个和第二个侧边栏隐藏。

.sidebar-first {
    ...
    position:fixed;
    height: 100%;
    z-index: 1;
    ...
}

.sidebar-second {
    ...
    position:fixed;
    height: 100%;
    right: 0;
    z-index: 1;
    ...
}

.header, 
.footer {
    ...
    z-index: 2;
    ...
}

.main {
    ...
    margin-left: 20%;
    margin-right: 20%;
    ...
}

编辑：在.main 上包含margin-right: 20%;，因为您的第二个侧边栏将隐藏您的主要内容。

【讨论】：

【解决方案2】：

.sidebar-first {
  width: 20%;
  background: #ccc;
  position: fixed;
  top: 0;
  bottom: 0;
  left: 0;
}
.sidebar-second { 
  width: 20%;
  background: #ddd;
  position: fixed;
  top: 0;
  bottom: 0;
  right: 0;
}

body {
  margin: 0;
}

.wrapper {
  min-height: 100vh;
  background: #ccc;
  display: flex;
  flex-direction: column;
}

.content {
  display: flex;
  flex: 1;
  background: #999;
  color: #000;
}

.columns {
  display: flex;
  flex: 1;
}

img {
    max-height: 100%;
    max-width: 100%;
}

.main {
  margin: 0 auto;
  background: #eee;
}

.sidebar-first{
  width: 20%;
  background: #ccc;
  position: fixed;
  top: 0;
  bottom: 0;
  left: 0;
}
.sidebar-second{ 
  width: 20%;
  background: #ddd;
  position: fixed;
  top: 0;
  bottom: 0;
  right: 0;
}

<div class="wrapper">
  <section class="content">
    <div class="columns">
      <main class="main">
        <div class='image-1'>
          <img src="https://images.cdn.fourfourtwo.com/sites/fourfourtwo.com/files/styles/image_landscape/public/lacazette-cropped_1du1hebls4tv11c8ef7kdpyok1.jpg?itok=Lh3EAtTj&c=87b6d99828d88c1b8ffe17a08d24fc7d">
        </div>
        <div class='image-1'>
          <img src="https://images.cdn.fourfourtwo.com/sites/fourfourtwo.com/files/styles/image_landscape/public/lacazette-cropped_1du1hebls4tv11c8ef7kdpyok1.jpg?itok=Lh3EAtTj&c=87b6d99828d88c1b8ffe17a08d24fc7d">
        </div>
        <div class='image-1'>
          <img src="https://images.cdn.fourfourtwo.com/sites/fourfourtwo.com/files/styles/image_landscape/public/lacazette-cropped_1du1hebls4tv11c8ef7kdpyok1.jpg?itok=Lh3EAtTj&c=87b6d99828d88c1b8ffe17a08d24fc7d">
        </div>
        <div class='image-1'>
          <img src="https://images.cdn.fourfourtwo.com/sites/fourfourtwo.com/files/styles/image_landscape/public/lacazette-cropped_1du1hebls4tv11c8ef7kdpyok1.jpg?itok=Lh3EAtTj&c=87b6d99828d88c1b8ffe17a08d24fc7d">
        </div>
      </main>
      <aside class="sidebar-first">Sidebar first: Fixed width</aside>
      <aside class="sidebar-second">Sidebar second: Fixed width</aside>
    </div>
  </section>
</div>

【讨论】：