javascript - 固定定位元件的 100vh 替代方案？

我有一个嵌套在 div (top navigation) 容器内的 flex。当 top-nav 展开时，我希望它占据视口(viewport)的整个高度。我知道这可以通过设置 100vh 的高度来实现，但它并未得到广泛支持。所以，我需要一种更传统的方式来实现这一点。
html 和 body 有一个 height 100% 但 View 的内容溢出，我可以滚动页面。

我现在拥有的是:

.top-nav .top-nav-links-wrapper {
    position: fixed;
    width: 100%;
    background-color: #fff;
    top: 50px;
    left: 0;
    height: 100%;
}

有没有办法实现这一点(除了将高度设置为 100vh )？

最佳答案

vh 和 vw 等视口(viewport)单位是 well supported ；使用它们。

另一种选择是将位置设置为 fixed 并设置 bottom: 0 。 height 假定父元素的高度并且不考虑位置、边距或填充； bottom 假定与父容器底部的偏移量。 width 与 right 也是如此。请记住，您不应同时使用 height 和 bottom，否则它们会相互覆盖。

这是一个工作示例。

.fullscreen {
  position: fixed;
  top: 50px;
  left: 0;
  right: 0;
  bottom: 0;

  background: cornflowerblue;
}

.body {
  height: 2000px;
}

<div class="fullscreen">this will be fullscreen with a top offset</div>

<div class="body">
  <p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Fusce sed arcu quis dui congue pulvinar. Ut scelerisque suscipit ipsum, in elementum velit aliquet sit amet. Nulla tempus iaculis vestibulum. Mauris eu odio id dui consectetur blandit facilisis nec metus. Nullam laoreet risus et aliquam viverra. Sed eu imperdiet metus. Vivamus at dui turpis.</p>
</div>

无论您使用哪种单位，页面始终能够在展开的导航后面滚动。如果您的导航栏也有固定位置，那么这应该不是问题，因此它可以跟随。

关于javascript - 固定定位元件的 100vh 替代方案？，我们在Stack Overflow上找到一个类似的问题：https://stackoverflow.com/questions/46835492/