Question

＆＃13;

<!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>

＆＃13;

aside

＆＃13;

我们如何使上面代码段中的aside元素（在aqua中着色）占据网格右边缘和浏览器窗口右边缘之间的空间？

aside元素的左边缘应该恰好触及网格的右边缘。 aside元素的右边缘应扩展到浏览器窗口的最末端（在右侧侧）。

响应：请记住aside元素需要响应，此元素的左右边缘都需要保留在网格的右边缘和右边缘浏览器窗口分别与浏览器窗口的宽度无关。

换句话说，无论浏览器尺寸如何，我们只需要将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% ); }元素从网格精确拉伸到窗口末尾。

给元素这个CSS：

遗憾的是，

不起作用，因为当调整窗口大小时，该元素显然不会触及边缘并在{{1}}方向上错误地转换。有什么想法吗？

请全屏查看页面顶部的代码段并调整窗口宽度以查看上述错误行为。

预期行为示例：

Answer 1

如果你想要它不在流程中，那么一个选项是使用＆＃34;幻数＆＃34;。一个神奇的数字是你使用硬编码的特定值，只是工作＆＃34;。它很脆弱，但有时是必要的。

为此，网格宽度为10rem。所以你可以这样做：

aside {
    position: absolute;
    right: 0;
    left: calc(50vw - 5rem); /* half width - 10rem / 2 */
}

修改：Here's a jsfiddle to show it in action.

创建一个扩展的流体侧边栏，以满足中心元素的边缘

1 个答案: