一旦添加了固定道具，VuetifyJS 工具栏就会覆盖内容答案

【问题标题】：VuetifyJS toolbar overlays content as soon as fixed prop gets added一旦添加了固定道具，VuetifyJS 工具栏就会覆盖内容
【发布时间】：2018-08-17 21:11:24
【问题描述】：

我需要使用固定工具栏（带有扩展名）。问题是，一旦添加了 fixed 道具，工具栏就会覆盖内容。如何将内容放置在工具栏下方？ CodePen 示例：https://codepen.io/anon/pen/jpgjyd?&editors=101

<div id="app">
  <v-app id="inspire">
    <v-toolbar
      color="primary"
      dark
      fixed
      extended         
    >
      <v-toolbar-side-icon></v-toolbar-side-icon>
      <v-toolbar-title slot="extension">Title</v-toolbar-title>
      <v-spacer></v-spacer>

      <v-btn icon>
        <v-icon>search</v-icon>
      </v-btn>
    </v-toolbar>

    <v-layout>
    <v-flex xs1 >
      +++ FIRST LINE +++ 
      [lots of text...]
      </v-flex>
        </v-layout>
  </v-app>
</div>

【问题讨论】：

您唯一的要求是工具栏始终卡在视口的顶部？

标签： javascript vue.js toolbar vuetify.js

【解决方案1】：

一种解决方案是将app 添加到v-toolbar 并将v-layout 包装在v-content 中

<v-toolbar
      app
      color="primary"
      dark
      fixed
      extended         
    >
...
</v-toolbar>
<v-content>
  <v-layout>
  </v-layout>
</v-content>

演示https://codepen.io/ittus/pen/mGdbeN?editors=1010

参考：Vuetify application layout tutorial

【讨论】：

由于版本 2.0.0 v-toolbar 无法修复，请使用 v-app-bar vuetifyjs.com/en/components/app-bars

【解决方案2】：

将app 添加到v-toolbar 并将v-layout 包裹在v-content 中

【讨论】：

【解决方案3】：

无法准确回答您的问题，这是您想要实现的目标吗：

new Vue({
  el: '#app',
  mounted(){
    var fixedElement = document.getElementsByClassName('v-toolbar--fixed')[0];
    var layout = document.getElementsByClassName('layout')[0];
    layout.style = "padding-top: "+ fixedElement.offsetHeight + 'px'; 
  }
});

https://codepen.io/Younes_k/pen/LJEjOL

【讨论】：