Question

我正在使用CSS网格来布局我的网站。我有想要使用粘性侧边栏的一般效果

.page {
      display: grid;
      grid-template-columns: 250px auto;
        grid-column-gap: 3%;
    }
    .sidebar {
      position: fixed;
      width: 250px;
        height: 100vh;
      background: red;
    }
    .main {
      grid-column-start: 2;
      background: pink;
    }

使用标记如下

<body>
    <div class="page">
    <div class="sidebar">
      <p>sidebar</p>
    </div>

      <div class="main">
      </div>
    </div>

我知道我可以通过使用grid-column-gap=0来消除列间隙，但是由于某种原因我无法摆脱页面div外部的页边距吗？我尝试使用margin=0和margin-left=0，但是如果没有空白，我无法一直将侧边栏一直移到左侧。 CSS网格是否需要其他内容或我误会了一些内容？谢谢！

删除空白CSS网格

0 个答案: