检测md面板何时大于窗口大小

Question

这个问题纯粹是CSS，但是对于我在背景中使用mdPanel进行angularjs的材质设计。

https://codepen.io/anon/pen/oJbPzX?&editable=true

如果您的浏览器相对较小，并且您将此高度设置为一个大值

.menu-panel .menu-content {
  display: flex;
  flex-direction: column;
  padding: 8px 0;
  height: 100px; <=== here
  overflow-y: auto;
  min-width: 256px;
}

您将在菜单之外找到菜单。这是一个示例，在我的情况下，我有一个很大的mdPanel（您可以通过在Codepen中设置高度来模拟它，我希望这些行为。

1. 如果该面板完全可见，请不要显示滚动条（EASY / 已实施）
2. 如果面板小于内容，请显示滚动条（EASY /已实施）
3. 如果面板更大或     走出视口，而不是向其中添加滚动条，这样我就可以     浏览内容（硬/未实施）

我该怎么做？

Answer 1

添加Height和calc

.menu-panel .menu-content {
    display: flex;
    flex-direction: column;
    padding: 8px 0;
    height: calc(100vh - 98px);
    overflow-y: auto;
    min-width: 256px;
}