Question

在页面上有一个容器（上面的标题，向左导航）。它包含一个网格。在网格选择上，我想显示一个侧面板（在右侧，显示出来）。

我不能使用固定位置 - 它应该在该容器内并在滚动主体时滚动。它不能是绝对位置，因为它会忽略flexbox高度，并且不会增长到适合页面并且会破坏响应高度。侧面板应覆盖在网格顶部，而不是将其推到一边出现。

面板的布局大致相似（flexbox）：

<div class="content-panel-wrapper">
    <div class="header"></div>
    <div class="vehicle-grid-container"></div>
</div>
<div class="magical-sidebar"></div>

没有jQuery。这是一个纯粹的Angular 4项目。

Answer 1

通过使用相对和绝对与flex的组合，我设法在容器内添加侧边栏并向右添加，允许它在可见时叠加内容。

HTML：

<div class="main-wrapper">
    <div class="content-panel-wrapper"></div>
    <ng-sidebar-container>
        <ng-sidebar>
        </ng-sidebar>
    </ng-sidebar-container>
</div>

的CSS：

.main-wrapper {
    display: -webkit-box;
    display: -webkit-flex;
    display: flex;
    -webkit-flex-direction: row;
    flex-direction: row;
    height: 100%;
    position: relative;
}
ng-sidebar-container {
    height: 100%;
    right: 0;
    display: block;
    position: relative;
}
.ng-sidebar {
    position: absolute;
}

在div中叠加侧面板，未固定

1 个答案: