基础 XY 网格

Question

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

我在这里做错了什么？

代码笔链接

Answer 1

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

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

这将使侧边栏在没有滚动的情况下最大高度。"display：flex"将使子元素彼此高度无关(因为缺乏更好的词(，而只是采用自己的高度。

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