javascript - 基础XY网格

我有一个XY网格，其中有一个偏移画布，但在XY网格的主体中。我想让偏移的画布位置占据可用空间的全部高度，但它没有这样做。它根据画布内容的高度包装画布的高度。因此，画布高度仅根据画布的内容高度而增长。当我将离画布包装纸的高度设置为100％时，滚动会混乱。
我已在此附加了Codepen的链接以检查问题。

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

我在这里做错了什么。

CodepenLink

最佳答案

我希望我了解您在这里做什么，但是您可以为此使用flexbox。

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

这将使侧边栏的最大高度不滚动。 “ display：flex”将使子元素与彼此的高度不相关（因为缺少更好的单词），而只会采用自己的高度。

仅当高度大于可见窗口时，overflow-y才会为div提供滚动条。

关于javascript - 基础XY网格，我们在Stack Overflow上找到一个类似的问题：https://stackoverflow.com/questions/51895000/