滚动时，Material VueJS组件未固定在底部页面上

【问题标题】：Material VueJS component not fixed on bottom page when scrolling滚动时，Material VueJS组件未固定在底部页面上
【发布时间】：2019-12-29 12:28:53
【问题描述】：

我在我的 VueJS 应用程序上使用了 <md-progress-bar> 组件，但我想在滚动页面时修复你在底部屏幕上的位置。我尝试了设置样式position: fixed;、absolute 和relative，但没有一个成功。

<template>
  <div>
  ...
    <md-progress-bar style="position: absolute;" md-mode="indeterminate" v-show="true"></md-progress-bar>
  </div>
</template>

还有……

<md-progress-bar
  style="position: fixed;
  bottom: 0;
  right: 0;
  width: 100%;"
  md-mode="indeterminate"
  v-show="true"
></md-progress-bar>

【问题讨论】：

标签： javascript css vue.js vue-material

【解决方案1】：

Vue.use(VueMaterial.default)

new Vue({
  el: '#app'
})

div.md-progress-bar--fixed {
  position: fixed;
  left: 0;
  bottom: 0;
  width: 100%;
}

.spacer {
  height: 1000vh;
}

.as-console-wrapper {
  display: none !important;
}

<link rel="stylesheet" href="https://fonts.googleapis.com/css?family=Roboto:300,400,500,700,400italic|Material+Icons">
<link rel="stylesheet" href="https://unpkg.com/vue-material/dist/vue-material.min.css">
<link rel="stylesheet" href="https://unpkg.com/vue-material/dist/theme/default.css">

<div id="app">
 <div class="spacer"></div>
  <md-progress-bar class="md-progress-bar--fixed" md-mode="indeterminate" v-show="true"></md-progress-bar>
</div>

<script src="https://unpkg.com/vue"></script>
<script src="https://unpkg.com/vue-material"></script>
<script>
</script>

【讨论】：