Question

我正在尝试创建一个包含2列的网格：
1）左侧的固定位置侧边栏
2）右侧的主要内容有一列。

根据this post，固定位置的网格项存在问题。一种回应是：

将内容包装在div中，并将div设置为位置固定。

作者成功地介绍了这种技术的demonstration。在这里，固定的侧边栏位于屏幕的右侧。

由于我需要左侧的固定侧边栏，因此我对这项技术进行了调整，如图here所示。我的修改基本上是为覆盖在侧边栏中的

提供一个宽度：

aside div {
  width: 200px;
  margin: 0;
  padding: 0;
  border: 1px solid blue;
  /* padding: 0 15px 0 5px; */
  position: fixed;
}

修改原则上可行，但由于某种原因，覆盖层会向右偏移一小段空白，如蓝色边框所示（用于调试目的）。结果，侧边栏中的文本溢出并且自动换行发生在侧边栏中。

1）为什么会发生这种情况？

2）是否可以精确地将固定位置的div覆盖在网格的侧边栏上？我已经尝试了某些元素的边距和填充，如代码笔所示，但它们没有帮助。我还尝试过减小覆盖的宽度，如here所示。这可行，但是是任意的。

2 个答案:

答案 0 :(得分：2)

答案 1 :(得分：0)

Answer 1

您可以仅将width:100%添加到CSS的.grid > * {}部分。这只会覆盖.grid的所有子元素的宽度，以填满整个网格元素的宽度，以使子元素不会溢出到网格之外。

这是您最终的代码：

body {
  margin: 0;
}

.grid {
  display: grid;
  grid-template-columns: 200px 1fr;
  grid-template-areas: "sb mn";
  grid-column-gap: 10px;
}

.grid>* {
  margin: 0;
  padding: 0;
  width: 100%;/*  This is the part I added */
}

.sidebar {
  grid-area: sb;
  border: 1px solid green;
  background-color: red;
}

aside div {
  width: 200px;
  margin: 0;
  padding: 0;
  border: 1px solid blue;
  /* padding: 0 15px 0 5px; */
  position: fixed;
}

.main {
  grid-area: mn;
}

<div class="grid">
  <aside class="sidebar">
    <div>
      <h4>laboris nisi</h4>

      <p>
        Cum sociis natoque penatibus bibendum enim facilisis gravida neque convallis a cras. Nibh sed pulvinar proin gravida. Cum sociis natoque penatibus et magnis dis parturient.
      </p>

      <p>
        Id neque aliquam vestibulum sed tempus urna et pharetra pharetra massa massa. Id leo in vitae turpis. Dignissim sodales ut eu sem integer.
      </p>

      <p>
        Vestibulum rhoncus est tristique nulla aliquet enim tortor at auctor urna nunc. Aliquet risus feugiat in ante metus. Feugiat nibh sed pulvinar proin gravida.
      </p>
    </div>
  </aside>

  <div class="main">
    <h1>Cras semper auctor neque vitae</h1>

    <p>
      Vulputate sapien nec sagittis aliquam malesuada bibendum arcu vitae elementum. Aenean et tortor at risus. Venenatis a condimentum vitae sapien pellentesque habitant. Sed elementum tempus egestas sed sed risus pretium quam vulputate. Ornare arcu odio ut
      sem nulla pharetra diam sit amet. Aliquam etiam erat velit scelerisque in dictum non. Nunc aliquet bibendum enim facilisis gravida neque convallis a cras. Ipsum dolor sit amet consectetur adipiscing elit ut aliquam. Eget nulla facilisi etiam dignissim.
      Odio tempor orci dapibus ultrices in. Amet volutpat consequat mauris nunc congue nisi. Accumsan sit amet nulla facilisi morbi tempus iaculis urna. Nibh sed pulvinar proin gravida. Cum sociis natoque penatibus et magnis dis parturient. Non pulvinar
      neque laoreet suspendisse interdum consectetur.
    </p>

    <p>
      Mattis molestie a iaculis at erat. Hac habitasse platea dictumst vestibulum rhoncus. Lacus luctus accumsan tortor posuere ac ut consequat semper viverra. Facilisis mauris sit amet massa vitae tortor condimentum lacinia. Non diam phasellus vestibulum lorem.
      Sed tempus urna et pharetra pharetra massa massa. Id leo in vitae turpis. Dignissim sodales ut eu sem integer. Erat velit scelerisque in dictum. Id venenatis a condimentum vitae sapien.
    </p>

    <p>
      Vitae semper quis lectus nulla at volutpat. Imperdiet sed euismod nisi porta lorem mollis. Fames ac turpis egestas sed. Tempus quam pellentesque nec nam aliquam sem et tortor. Ut tellus elementum sagittis vitae et leo duis. Habitant morbi tristique senectus
      et netus et malesuada. Penatibus et magnis dis parturient. Dis parturient montes nascetur ridiculus mus mauris vitae ultricies. Sit amet volutpat consequat mauris nunc congue. Pharetra massa massa ultricies mi quis hendrerit dolor magna. Feugiat
      nibh sed pulvinar proin gravida hendrerit lectus. Ultricies tristique nulla aliquet enim tortor at auctor urna nunc. Aliquet risus feugiat in ante metus. Vitae aliquet nec ullamcorper sit amet. Aliquam malesuada bibendum arcu vitae. Aliquet nibh
      praesent tristique magna sit amet purus. Gravida rutrum quisque non tellus orci ac auctor. Etiam erat velit scelerisque in dictum non consectetur a erat.
    </p>

    <p>
      Vulputate sapien nec sagittis aliquam malesuada bibendum arcu vitae elementum. Aenean et tortor at risus. Venenatis a condimentum vitae sapien pellentesque habitant. Sed elementum tempus egestas sed sed risus pretium quam vulputate. Ornare arcu odio ut
      sem nulla pharetra diam sit amet. Aliquam etiam erat velit scelerisque in dictum non. Nunc aliquet bibendum enim facilisis gravida neque convallis a cras. Ipsum dolor sit amet consectetur adipiscing elit ut aliquam. Eget nulla facilisi etiam dignissim.
      Odio tempor orci dapibus ultrices in. Amet volutpat consequat mauris nunc congue nisi. Accumsan sit amet nulla facilisi morbi tempus iaculis urna. Nibh sed pulvinar proin gravida. Cum sociis natoque penatibus et magnis dis parturient. Non pulvinar
      neque laoreet suspendisse interdum consectetur.
    </p>

    <p>
      Mattis molestie a iaculis at erat. Hac habitasse platea dictumst vestibulum rhoncus. Lacus luctus accumsan tortor posuere ac ut consequat semper viverra. Facilisis mauris sit amet massa vitae tortor condimentum lacinia. Non diam phasellus vestibulum lorem.
      Sed tempus urna et pharetra pharetra massa massa. Id leo in vitae turpis. Dignissim sodales ut eu sem integer. Erat velit scelerisque in dictum. Id venenatis a condimentum vitae sapien.
    </p>

    <p>
      Vitae semper quis lectus nulla at volutpat. Imperdiet sed euismod nisi porta lorem mollis. Fames ac turpis egestas sed. Tempus quam pellentesque nec nam aliquam sem et tortor. Ut tellus elementum sagittis vitae et leo duis. Habitant morbi tristique senectus
      et netus et malesuada. Penatibus et magnis dis parturient. Dis parturient montes nascetur ridiculus mus mauris vitae ultricies. Sit amet volutpat consequat mauris nunc congue. Pharetra massa massa ultricies mi quis hendrerit dolor magna. Feugiat
      nibh sed pulvinar proin gravida hendrerit lectus. Ultricies tristique nulla aliquet enim tortor at auctor urna nunc. Aliquet risus feugiat in ante metus. Vitae aliquet nec ullamcorper sit amet. Aliquam malesuada bibendum arcu vitae. Aliquet nibh
      praesent tristique magna sit amet purus. Gravida rutrum quisque non tellus orci ac auctor. Etiam erat velit scelerisque in dictum non consectetur a erat.
    </p>

    <p>
      Vulputate sapien nec sagittis aliquam malesuada bibendum arcu vitae elementum. Aenean et tortor at risus. Venenatis a condimentum vitae sapien pellentesque habitant. Sed elementum tempus egestas sed sed risus pretium quam vulputate. Ornare arcu odio ut
      sem nulla pharetra diam sit amet. Aliquam etiam erat velit scelerisque in dictum non. Nunc aliquet bibendum enim facilisis gravida neque convallis a cras. Ipsum dolor sit amet consectetur adipiscing elit ut aliquam. Eget nulla facilisi etiam dignissim.
      Odio tempor orci dapibus ultrices in. Amet volutpat consequat mauris nunc congue nisi. Accumsan sit amet nulla facilisi morbi tempus iaculis urna. Nibh sed pulvinar proin gravida. Cum sociis natoque penatibus et magnis dis parturient. Non pulvinar
      neque laoreet suspendisse interdum consectetur.
    </p>

    <p>
      Mattis molestie a iaculis at erat. Hac habitasse platea dictumst vestibulum rhoncus. Lacus luctus accumsan tortor posuere ac ut consequat semper viverra. Facilisis mauris sit amet massa vitae tortor condimentum lacinia. Non diam phasellus vestibulum lorem.
      Sed tempus urna et pharetra pharetra massa massa. Id leo in vitae turpis. Dignissim sodales ut eu sem integer. Erat velit scelerisque in dictum. Id venenatis a condimentum vitae sapien.
    </p>

    <p>
      Vitae semper quis lectus nulla at volutpat. Imperdiet sed euismod nisi porta lorem mollis. Fames ac turpis egestas sed. Tempus quam pellentesque nec nam aliquam sem et tortor. Ut tellus elementum sagittis vitae et leo duis. Habitant morbi tristique senectus
      et netus et malesuada. Penatibus et magnis dis parturient. Dis parturient montes nascetur ridiculus mus mauris vitae ultricies. Sit amet volutpat consequat mauris nunc congue. Pharetra massa massa ultricies mi quis hendrerit dolor magna. Feugiat
      nibh sed pulvinar proin gravida hendrerit lectus. Ultricies tristique nulla aliquet enim tortor at auctor urna nunc. Aliquet risus feugiat in ante metus. Vitae aliquet nec ullamcorper sit amet. Aliquam malesuada bibendum arcu vitae. Aliquet nibh
      praesent tristique magna sit amet purus. Gravida rutrum quisque non tellus orci ac auctor. Etiam erat velit scelerisque in dictum non consectetur a erat.
    </p>
  </div>
  <!-- main -->
</div>
<!-- grid -->

但是，如果您只需要固定的侧边栏，则可以将height:100vh; overflow-Y: scroll添加到.main，或者如@ndvo建议使用position: sticky，这是一个更好的解决方案。

然后您的代码应变为：

body {
  margin: 0;
  padding: 0;
}

.grid {
  display: grid;
  grid-template-columns: 250px 1fr;
  grid-template-areas: "sb mn";
  grid-column-gap: 2vw;/* using the unit 'vw'(2% of viewport-width) will make the gap responsive */
  height: 100vh; /* 100% of viewport-height. (Fill up the whole screen height)  */
}

.sidebar {
  grid-area: sb;
  padding: 0 5px;
  /* The part below is just appearance */
  box-shadow: inset 2px 2px red, inset -2px -2px red;
  background: yellow;
}

.sidebarContent {
  position: sticky;
  top: 0;
  /* The part below is just appearance */
  height:60vh;
  background: red;
  text-align: center;
  color: yellow
}

.main {
  grid-area: mn;
  padding: 0 5px;
  /* The part below is just appearance */
  box-shadow: inset 2px 2px red, inset -2px -2px red;
  background: green;
}

.mainContent {
  /* The part below is just appearance */
  background: red;
  text-align: center;
  color: yellow
}

<div class="grid">
  <aside class="sidebar">
    <div class="sidebarContent">
      SideBar Content
    </div>
  </aside>
  <div class="main">
    <div class="mainContent">
      Main Content<br>Main Content<br>Main Content<br>Main Content<br>Main Content<br>Main Content<br>Main Content<br>Main Content<br>Main Content<br>.<br>.<br>.<br>.<br>.<br>.<br>.<br>.<br>.<br>.<br>.<br>.<br>.<br>.<br>.<br>.<br>.<br>.<br>.<br>.<br>.<br>.<br>.<br>.<br>.<br>.<br>.<br>.<br>.<br>.<br>.<br>.<br>.<br>.<br>.<br>.<br>.<br>.<br>.<br>.<br>.<br>.<br>.<br>.<br>.<br>.<br>.<br>.<br>.<br>.<br>.<br>.<br>.<br>.<br>.<br>.<br>.<br>.<br>.<br>.<br>.<br>.<br>.<br>.<br>.<br>.<br>.<br>.<br>.<br>.<br>.<br>.<br>.<br>.<br>.<br>.<br>.<br>.<br>.<br>.<br>.<br>.<br>.<br>.<br>.<br>.<br>.<br>.<br>.<br>.<br>.<br>.<br>.<br>.<br>.<br>.<br>.<br>.<br>.<br>.<br>.<br>.<br>.<br>.<br>.<br>.<br>.<br>.<br>.<br>.<br>.<br>.<br>.<br>.<br>.<br>.<br>.<br>.<br>.<br>.<br>.<br>.<br>.<br>.<br>.<br>.<br>.<br>.<br>.<br>.<br>.<br>.<br>.<br>.<br>.<br>.<br>.<br>.<br>.<br>.<br>.<br>.<br>.<br>.<br>.<br>.<br>.<br>.<br>.<br>.<br>.<br>.<br>.<br>.<br>.<br>.<br>.<br>.<br>.<br>.<br>.<br>.<br>.<br>.<br>.<br>.<br>.<br>.<br>.<br>.<br>Main
      Content<br>Main Content<br>Main Content<br>Main Content<br>Main Content<br>Main Content<br>Main Content<br>Main Content<br>Main Content<br>Main Content<br>Main Content<br>Main Content<br>
    </div>
  </div>
</div>

切线：

与边界box-shadows相比，我更喜欢使用border，因为边界会占用更多空间，因此会稍微降低网格百分比（也许我是OCD）。
我还想推荐GridGarden，这款游戏只有28个非常简单的关卡（在撰写本文时）。只需完成一次。它帮助了我；它也可能对其他人有帮助。

Answer 2

位置固定的问题

第一个网格项目的宽度为200像素（在网格定义中使用grid-template-columns: 200px 1fr），与此同时，aside div和{ {1}}（和width: 200px未与padding一起添加。

建议

但是我建议省略left: 0的固定定位并将position: fixed添加到网格容器。这会将网格限制在视口中，现在您可以根据需要将aside div添加到两个网格项中。这将为您提供固定侧边栏的相同效果-请参见下面的演示

grid-template-rows: 100vh

overflow-y: auto

无法在网格项目上精确定位固定位置的叠加层

2 个答案: