Question

我想修复通过css-grids定位的标题和侧边栏。我尝试使用position：fixed，但是最终弄乱了界面。有没有简单的方法可以做到这一点？还是唯一的相对定位和高度/宽度调整方法？我不想使css-grids的使用毫无意义...

如果您觉得它更简单，请点击此处链接到Codepen（下面包含不带唇膏的代码）：https://codepen.io/fergos2/pen/MWgLqgL?editors=1100

提前感谢您帮助这个新手！

<div class="container">
  <header class="header pd">Header</header>

    <div class="left-sidebar pd">
      <div class="box-1 pd">
        Box-1
      </div>
      <footer class="footer pd">
        Footer
      </footer>
    </div>

    <div class="main-content pd">
      Main content 
    </div>


    <div class="right-sidebar pd">
      <div class="box-2 pd">
        Box-2
      </div>
      <div class="box-3 pd">
        Box-3
      </div>
    </div>
</div>

.container {
  width: 1000px;
  margin: 30px auto;
  background-color: #eee;

  display: grid;
  grid-template-rows: min-content 1fr;
  grid-template-columns: 1fr 2fr 1fr;
  grid-gap: 15px;

  grid-template-areas: "head head head"
                       "leftbar main rightbar";

  & > * {
    background-color: pink;
    color: #ggg;
    font-size: 20px;
    font-family: sans-serif;
  }
}

  .pd {
    padding: 15px;
  }

  .header {
    grid-area: head;
  }

  .left-sidebar {
    grid-area: leftbar;

    display: flex;
    flex-direction: column;
    justify-content: flex-start;

    .box-1 {
      color: red;
      border: 1px solid purple;
      margin-bottom: 5px;
    }

    .footer {
      color: green;
      border: 1px solid purple;
    }
  }

  .main-content {
    grid-area: main;
  }

  .right-sidebar {
    grid-area: rightbar;

     display: flex;
     flex-direction: column;
     justify-content: flex-start;

      .box-2 {
        color: red;
        border: 1px solid purple;
        margin-bottom: 5px;
      }

      .box-3 {
        color: green;
        border: 1px solid purple;
      }
  }

更新：

  position: -webkit-sticky;
  position: sticky;
  top: 0;

似乎适用于标题，但不适用于侧边栏（例如，即使设置top：200px，也是如此）。关于如何使用边栏的任何建议？

如何使用CSS网格修复侧栏

0 个答案: