0

我有一个 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

4

1 回答 1

0

我希望我明白你在这里做什么，但你可以使用 flexbox。

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

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

overflow-y 会给你的 div 一个滚动条，但前提是高度大于可见窗口。

于 2018-08-17T12:09:52.053 回答