Основание XY Grid
У меня есть сетка 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">×</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>
Что я тут не так делаю.
1 ответ
Надеюсь, я понял, что вы здесь делаете, но вы можете использовать flexbox для этого.
.off-canvas-wrapper {
display: flex;
height: 100%;
overflow-y: scroll;
}
Это сделает боковую панель максимальной высоты без прокрутки. "Display:flex" сделает дочерние элементы не релевантными (из-за отсутствия лучшего слова) для высоты друг друга и скорее просто будет принимать собственную высоту.
Переполнение-у даст вашему div полосы прокрутки, но только если высота больше, чем видимое окно.