Html CSS div 100% 到高度

Question

只是为了防止我在 vuejs 上做我的项目，但这不会改变通常放置 div 的方式（html-css 仍然是同一件事）x)

那我画个小图方便说明：

diagram

我需要 div 将其粘贴到屏幕底部，问题是我无法对其应用 a% 或 vh，因为导航栏处于固定高度（因此会推动我的 div 在小屏幕上朝下）。

通常我将 div 放在导航栏下方，我应用高度：100vh 和 div 大小的 padding-top，但这次我不想将它放在导航栏下方.

那么我该怎么做：高度：100vh - 导航栏的高度

我还指定我希望（如果可能的话）不使用 js，因为我的导航栏和我的 div 是与 vueJS 不同的组件，因此我认为就高度而言它会非常乏味

我不知道我的解释是否清楚，但感谢您花时间阅读:)

Answer 1

您可以为此使用 calc(100vh - HEIGHT_OF_NAVBAR)。

myElem {
  height: calc(100vh - NAV_HEIGHT); /*where NAV_HEIGHT can be px, em or whatever */
}