Question

我需要使用固定工具栏（带有扩展名）。问题是，一旦添加固定道具，工具栏就会覆盖内容。如何将内容放置在工具栏下方？ 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>

Answer 1

一种解决方案是将app添加到v-toolbar并在v-content内包裹v布局

<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

Answer 2

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

Answer 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

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

3 个答案: