我有一个扩展面板,它位于一个div内部,具有固定的高度。目前,当一个面板扩展时,打开的面板会将所有其他面板推到父div的溢出处,这使它们不可见,迫使用户要么关闭打开的面板,要么向下滚动以查看其他标题。
这是一个来自Vuetify的例子。
我尝试限制扩展面板的高度,这样当您打开一个面板时,其他面板的标题会被推到父div的底部,但不会被推到溢出位置。然后,我希望能够滚动打开的面板的内容,因为内容无法全部放入父div。这样,用户可以滚动打开的内容,同时仍然能够看到其它面板的标题
Example of how I would like the expansion panel to appear
我尝试将v-expansion-panels
和v-expansion-panel
的max-height
设置为100%
,但面板在打开时总是比父容器大。我还尝试将v-panel-title
的位置设置为固定,以便在滚动时固定到父div的底部,但整个扩展面板在我尝试时都断开了。
1条答案
按热度按时间fdx2calv1#
如果面板的数量始终相同,则可以执行以下操作:
48px对应于非活动面板标题高度:https://vuetifyjs.com/en/api/v-expansion-panel/#sass-expansion-panel-title-min-height
64px对应于活动面板标题高度:https://vuetifyjs.com/en/api/v-expansion-panel/#sass-expansion-panel-active-title-min-height
(if您正在使用sass,可以使用Vuetify sass变量)