Question

这是我的代码：https://jsfiddle.net/dereklin/0tLf05sr/12/

我想将扩展手柄置于右侧，但仅在滚动条之前：

  #expand-handle {
    grid-row: 6 / 7;
    grid-column: 2 / 3;
    justify-self: end;
    width: 40px;
    height: 140px;
    background-color: #00677f;
    color: white;
    border: 1px solid #ccc;
    padding: 5px 0px;
    writing-mode: vertical-lr;
    transform: rotate(180deg);
    cursor: pointer;
    margin-top: 85px;
    text-align: center;
  }

但是，这不起作用

在CSS网格中执行此操作的正确方法是什么？

（右边距不是我要寻找的解决方案，因为我还有其他页面可能没有滚动条）

Answer 1

在#expand-handle中移动<div class="content"></div>怎么样？

https://jsfiddle.net/pratie/0tLf05sr/23/

Answer 2

将＃expand-handle 放入 .main 分区中。

value1

然后，像这样更改您的主CSS和扩展句柄。

<div class="main">
    Lorem ipsum dolor sit amet, consectetur .........

    <div id="expand-handle">Expand Me</div>
</div>

此外，删除内容和正文中的overcss。

    .main {
      grid-area: main;
      height: 1000px;
      position: relative;
    }

      #expand-handle {
        position: fixed;
        right: 0;
        width: 40px;
        height: 140px;
        background-color: #00677f;
        color: white;
        border: 1px solid #ccc;
        padding: 5px 0px;
        writing-mode: vertical-lr;
        transform: rotate(180deg);
        cursor: pointer;
        margin-top: 85px;
        text-align: center;
      }

CSS网格重叠项目覆盖滚动条

2 个答案: