html – 如何使用CSS网格布局在CSS中创建固定列？

发布时间：2020-12-14 21:17:49 所属栏目：资源来源：网络整理

导读：我创建了一个简单的网站,其中#container div是两个div的父级：#left和#right,使用 Grid Layout：有没有办法让左栏固定？我希望左侧文本保持其位置,并且正确的文本可以像现在一样滚动.添加位置：固定为#left会破坏布局. 我知道这个问题已经解决了,但我很欣赏

我创建了一个简单的网站,其中#container div是两个div的父级：#left和#right,使用 Grid Layout：

有没有办法让左栏固定？我希望左侧文本保持其位置,并且正确的文本可以像现在一样滚动.添加位置：固定为#left会破坏布局.

我知道这个问题已经解决了,但我很欣赏一种方法来使它适用于网格布局.

谢谢.

body {
  margin: 0 0 0 0;
}

#container {
  display: grid;
  grid-template-columns: 50% 50%;
}

.section {
  padding: 5% 5% 5% 5%;
}

#left {
  background-color: aquamarine;
}

#right {
  background-color: beige;
}

<div id="container">
  <div id="left" class="section">
    <p>This should not scroll</p>
  </div>
  <div id="right" class="section">
    <p>
      Lorem ipsum dolor sit amet,consectetur adipiscing elit. Nulla aliquet consectetur purus nec volutpat. Donec vel libero nec est commodo facilisis vel et nisl. Praesent porta sed eros eu porta. Cras dolor nulla,ullamcorper et tincidunt quis,porta ut
      tellus. Maecenas cursus libero sed accumsan luctus. Integer sed consequat ante. Morbi sit amet lectus tempor elit tempor cursus ut sed enim. Donec placerat bibendum volutpat.
    </p>
    <p>
      Nunc sit amet eleifend sapien,sed tincidunt neque. Donec id sapien et nunc scelerisque iaculis dignissim nec mauris. Fusce at pretium nulla. Maecenas vel rutrum tellus,a viverra nunc. Aenean at arcu vitae dui faucibus dapibus. Vivamus hendrerit blandit
      mollis. Aenean sit amet lectus a metus faucibus condimentum. Proin vel eros ut elit pharetra lacinia vitae eu orci. Etiam massa massa,aliquam at pulvinar ut,porttitor eu mauris. Ut in iaculis sapien.
    </p>
    <p>
      In vitae rhoncus arcu. Maecenas elementum nunc quis magna finibus,vitae imperdiet diam pulvinar. Phasellus sit amet nibh eu massa facilisis luctus. Nulla ullamcorper sodales ante id vestibulum. Fusce felis nisi,lacinia sit amet mauris vel,euismod suscipit
      neque. Mauris quis libero eget enim facilisis pharetra. Fusce non ligula auctor nunc pretium dignissim eget eget turpis. Nam ultricies dolor ac libero maximus vestibulum. Mauris et tortor vitae nisi ultrices vestibulum ac id mauris. Proin interdum
      dapibus sollicitudin. Phasellus ultricies vulputate sem id hendrerit. Cras eget posuere nunc,in placerat velit. Pellentesque sed ante at elit ornare efficitur. Donec sed condimentum nisl. Curabitur dapibus leo id ligula dignissim pharetra.
    </p>
  </div>
</div>

解决方法

你写了：

Is there any way to make the left column fixed?

I’d appreciate a way to make it work with the grid layout.

如果您希望元素保留为网格项,则答案为“否”.

一旦元素具有position：absolute或position：fixed(which is a form of absolute positioning,with reference to the viewport),它将具有以下新特征：

>该元素将从文档流中删除
>该元素已从grid formatting context中删除
>元素不再是网格项

从规格：

07002

An absolutely-positioned child of a grid container is out-of-flow and
not a grid item,and so does not affect the placement of other items
or the sizing of the grid.

因此,网格项不能与绝对定位一起使用.

但是,应用位置时没有问题：固定到网格容器.

考虑分别管理#left和#right元素. #left可以是固定位置的网格容器. #right可以是另一个网格容器并保持流入状态.

另外,另外,您已经为网格项目提供了基于百分比的填充：

.section {
    padding: 5% 5% 5% 5%;
}

将边距和填充应用于网格项(和弹性项)时,最好远离百分比单位.浏览器可以不同地计算值.

> Percentage padding on grid item being ignored in Firefox
> Why doesn’t percentage padding work on flex items in Firefox?

（编辑：李大同）

【声明】本站内容均来自网络，其相关言论仅代表作者个人观点，不代表本站立场。若无意侵犯到您的权利，请及时与联系站长删除相关内容!