aside {
height: 80%;
width: 15%;
background-color: #0ee;
opacity: 0.25;
outline: 2px #0bb solid;
position: absolute;
top: 50%;
left: 85%;
transform: translate( -50%, -50% );
}<!DOCTYPE html>
<html lang="en-US">
<head>
<meta name="viewport" content="width=device-width">
<meta charset="utf-8">
<link rel="stylesheet" href="https://codepen.io/basement/pen/rzPvQx.css">
<title>grid</title>
</head>
<body>
<svg
xmlns="http://www.w3.org/2000/svg" viewBox="0 0 100 100"
width="100" height="100" class="cntr" id="grid"
>
<script xlink:href="https://codepen.io/basement/pen/rzPvQx.js"></script>
<text
x="50" y="95"
alignment-baseline="middle" text-anchor="middle"
class="title"
>SVG GRID</text>
<g id="drwing">
<circle cx="60" cy="40" r="0.5" fill="#0cc" opacity="0.9" />
</g>
</svg>
<aside></aside> <!-- the relevant element -->
<script src="https://codepen.io/basement/pen/LjqmML.js"></script>
</body>
</html>我们如何让上面代码片段中的 aside 元素(浅绿色)恰好占据网格右边缘和浏览器窗口右边缘之间的空间？
aside 元素的左边缘应该恰好接触到网格的右边缘。 aside 元素的右边缘应延伸到浏览器窗口的最末端(在右侧 侧)。
响应式请记住，aside 元素需要响应式，该元素的左右边缘都需要保持在网格的右边缘，并且浏览器窗口的右边缘分别与浏览器窗口的宽度无关。
换句话说，无论浏览器尺寸如何，我们只需要将 aside 元素从网格精确地拉伸(stretch)到窗口的末尾。
给元素这个 CSS:
aside {
height: 80%;
width: 15%;
background-color: #0ee;
opacity: 0.25;
outline: 2px #0bb solid;
position: absolute;
top: 50%;
left: 85%;
transform: translate( -50%, -50% );
}
不幸的是不起作用，因为元素显然没有接触边缘，并且在调整窗口大小时在 x 方向上不正确地平移。有什么想法吗？
请全屏查看页面顶部的代码段并调整窗口宽度以查看上述不正确的行为。
预期行为示例:
最佳答案
如果您希望它脱离流程，那么一种选择是使用“魔数(Magic Number)”。魔数(Magic Number)是您使用“有效”的硬编码特定值的地方。它很脆弱，但有时是必要的。
为此，网格宽度为 10rem。所以你可以这样做:
aside {
position: absolute;
right: 0;
left: calc(50vw - 5rem); /* half width - 10rem / 2 */
}
关于javascript - 创建一个可扩展以与中心元素的边缘相交的流动侧边栏，我们在Stack Overflow上找到一个类似的问题： https://stackoverflow.com/questions/46007750/