我有一个充满图块的面板,可以是任意长度,包括滚动超出视口的下限,因此当前正在使用垂直滚动。
我想要的是一个可选的下部面板,可以根据用户的要求显示或隐藏,该面板始终占据屏幕下部的 25%。然后,上面的图块应收缩到上方的滚动窗格,以便您可以独立滚动图块,而无需更改下部面板的位置。
所以我需要一个始终为屏幕高度 100% 且不滚动的外部容器。
其中,我想要一个可滚动内容的面板。如果这是唯一可见的面板,那么它应该占据外部容器的 100% 高度,给人一种主屏幕正在滚动的错觉。
当下部面板可见时,可滚动内容应仅占据屏幕高度的前 75%,并且滚动条仅占高度的 75% 以反映这一点。下面的 25% 是应该修复的新面板。下部面板也应该可以独立滚动。所以你最终会得到两个相互堆叠的独立滚动面板
我尝试过使用 Flexbox 来做到这一点,但没有任何运气。谁能告诉我我做错了什么?
下面拨弄
https://jsfiddle.net/cdg6815s/2/
.app-container {
height: 100%;
padding: 10px;
background-color: blue;
overflow: hidden;
display: flex;
flex-direction: column;
}
.container {
height: 80%;
background-color: green;
padding: 10px;
flex: 0.8;
overflow-y: scroll;
}
.logtailContainer {
height: 20%;
background-color: red;
padding: 10px;
flex: 0.2;
overflow-y: scroll;
}
眼眸繁星
皈依舞
相关分类