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

Question

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

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. 如果面板小于内容，则显示滚动条(简单/已实现)
3. 如果面板更大或 走出视口(viewport)，而不是向它添加一个滚动条，这样我就可以 导航内容(困难/未实现)

我该怎么做？

Answer 1

使用calc 添加高度

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