Javascript 基础XY网格

我有一个XY网格，其中有一个偏移画布，但在XY网格的主体中。我想偏移画布位置左采取的全部可用空间的高度，但它没有这样做。它根据画布内容的高度来包装画布的高度。因此，画布高度仅根据画布的内容高度增长。当我将非画布包装设置为100%的高度时，滚动会出错。 我已经附上了一个代码笔的链接来检查这个问题

    <div class="grid-y grid-frame">
    <div class="cell shrink header">
      <button type="button" class="button" data-toggle="offCanvasLeft">Open Menu</button>
      <h1>Grid Frame Header</h1>
    </div>
   <div class="cell auto body">

       <div class="off-canvas-wrapper">
         <div class="off-canvas position-left off-canvas-absolute reveal-for-medium" id="offCanvasLeft" data-off-canvas>
           <button class="close-button" aria-label="Close menu" type="button" data-close>
             <span aria-hidden="true">&times;</span>
           </button>

           <ul class="vertical menu" data-accordion-menu style="max-width: 250px">
                  <li>
                    <a href="#">Item 1</a>
                    <ul class="menu vertical nested">
                      <li>
                        <a href="#">Item 1A</a>
                        <ul class="menu vertical nested">
                          <li><a href="#">Item 1Ai</a></li>
                          <li><a href="#">Item 1Aii</a></li>
                          <li><a href="#">Item 1Aiii</a></li>
                        </ul>
                      </li>
                      <li><a href="#">Item 1B</a></li>
                      <li><a href="#">Item 1C</a></li>
                    </ul>
                  </li>
                  <li>
                    <a href="#">Item 2</a>
                    <ul class="menu vertical nested">
                      <li><a href="#">Item 2A</a></li>
                      <li><a href="#">Item 2B</a></li>
                    </ul>
                  </li>
                  <li><a href="#">Item 3</a></li>
            </ul>
         </div>
         <div class="off-canvas-content" data-off-canvas-content>
           <p>
             No weapon fashion against me shall prosperNo weapon fashion against me shall prosperNo weapon fashion against me shall prosperNo weapon fashion against me shall prosperNo weapon fashion against me shall prosperNo weapon fashion against me shall prosperNo weapon fashion against me shall prosperNo weapon fashion against me shall prosperNo weapon fashion against me shall prosperNo weapon fashion against me shall prosperNo weapon fashion against me shall prosperNo weapon fashion against me shall prosperNo weapon fashion against me shall prosperNo weapon fashion against me shall prosperNo weapon fashion against me shall prosperNo weapon fashion against me shall 
           </p>
         </div>
     </div>
  </div>
  <div class="cell shrink footer">
    <h3>Here's my footer</h3>
  </div>
</div>

打开菜单
网格帧头
&时代；























任何针对我的武器都不会成功任何针对我的武器都不会成功任何针对我的武器都不会成功任何针对我的武器都不会成功任何针对我的武器都不会成功任何针对我的武器都不会成功任何针对我的武器都不会成功任何针对我的武器都不会成功任何武器都不会成功反对我的时尚不会成功反对我的时尚不会成功反对我的时尚不会成功反对我的时尚不会成功反对我的时尚不会成功反对我的时尚不会成功反对我的时尚不会成功反对我的时尚不会成功反对我的时尚不会成功反对我的时尚不会成功反对我的时尚不会成功

这是我的页脚

我做错了什么

---

我希望我理解了您在这里所做的工作，但您可以使用flexbox来实现这一点

.off-canvas-wrapper {
   display: flex;
   height: 100%;
   overflow-y: scroll;
 }

这将使边栏在没有滚动的情况下达到最大高度。“display:flex”将使子元素与彼此的高度不相关（因为缺少更好的词），而只取其自身的高度

---

overflow-y将为您的div提供一个滚动条，但仅当高度大于可见窗口时。

当我这样做时，

非画布内容

在超出可用空间时不会再次滚动。请检查代码笔链接。CodepenLink@user3701188我已经更改了我的答案，现在应该可以了：）我添加了它，但滚动条显示在右侧，但没有滚动，我已经对代码笔编辑器进行了更改，您也可以检查一下吗