这是我的代码: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网格中执行此操作的正确方法是什么?
(右边距不是我要寻找的解决方案,因为我还有其他页面可能没有滚动条)
答案 0 :(得分:0)
在#expand-handle
中移动<div class="content"></div>
怎么样?
答案 1 :(得分:0)
将#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;
}