html - 由于 div 的高度，页面没有从顶部开始

Question

我目前正在使用 Vuejs 并路由到其他页面。对于我的照片链接，我想要一张覆盖整个屏幕的主封面照片。

<template>
    <div id="album-container">

     <div class="cover-image"></div>

     <section class='intro'>Lorem </section>

     <div class="image-flex-wrap">
        <div class="image-cell" v-for="image in images">
            <img :src="image">
        </div>
     </div>

    </div>
</template>



.cover-image {
   background: url('my photo') #fff  no-repeat center center;
   background-size: cover;
   height: 100vh;
}

这会按照我想要的方式显示页面，但是当我从之前向下滚动的页面路由到此页面时，问题就出现了。它不是从页面顶部开始，而是从我的封面图像 div 的中间开始。我认为问题与高度有关:100vh，因为如果我将其替换为position:absolute和 100% 的宽度，那么页面将从顶部开始。但是，我想避免使用绝对定位，但对 css 的了解不足，无法理解为什么会发生这种情况。

Answer 1

感谢您的建议。

事实证明这个问题与 Vuejs 无关。我没有提到我正在使用 Material Design Lite，因为我没想到它是原因，但不幸的是。由于它的工作方式，您不再通过 MDL 提供的 .mdl-layout__content 类在窗口对象上滚动。这就是所有与窗口相关的滚动属性都返回 0 的原因。

我只是在我的路线上设置了一个 watch 方法来强制 scrollTop。

watch: {
 $route() {
  document.getElementsByClassName('mdl-layout').scrollTop = 0;
 }
}