Framework7-＆gt; CSS：如何在popover下制作标签可滚动

Question

我的问题与framework7实现有关，但基本上是一个CSS问题：

我tabs下有popover。我需要使这些标签内容垂直滚动。选项卡的默认实现具有滚动启用功能，但是当这些选项卡置于弹出框下时（如果您愿意，则为模态），则这些选项卡将停止滚动。

我做了一个基本的fiddle，以便更好地解释这个问题。在小提琴中，如果单击“Click Me”然后转到“Account”选项卡，您会注意到该选项卡不可滚动。

感谢

Answer 1

你去了，修复：https://jsfiddle.net/xbvqksu8/3/

此CSS已添加：

 .popover-inner {
    max-height:100vh !important;
  }
.list-block ul {
    overflow-Y:auto;
  }

如果您希望菜单适合屏幕，请将100vh更改为更低的值。祝你好运！

Answer 2

@Fausto NA很棒。

有一个小问题，因为弹出框具有最高边距（通常为8像素）。

因此需要这样的东西：

.popover-inner {
    max-height: calc(100vh - 8px) !important;      // last fallback
    max-height: -webkit-fill-available !important; // fallback: supported by many webviews
    max-height: stretch !important;                // still not widely supported
}

参考：Can I use Intrinsic & Extrinsic Sizing