内容大小 - Vuetify

Question

我正在尝试让右下角的组件填满它的所有空间，
我放置了一个 div 元素，但由于某种原因，它不会填满整个宽度
我希望它填充从侧边栏到结尾的所有内容（也是全高）。
我不想为此使用 CSS 定位。
我试过width: 100%，但它不起作用

代码：

<template>
  <div>
    <v-navigation-drawer v-model="drawer" clipped fixed app>
      <v-list dense>
        <v-list-tile class="mt-3" @click>
          <v-list-tile-action>
            <v-icon color="darken-1">add_circle_outline</v-icon>
          </v-list-tile-action>
          <v-list-tile-title>Subscribe</v-list-tile-title>
        </v-list-tile>
        <v-list-tile disabled @click>
          <v-list-tile-action>
            <v-icon>dashboard</v-icon>
          </v-list-tile-action>
          <v-list-tile-content>
            <v-list-tile-title>Dashboard</v-list-tile-title>
          </v-list-tile-content>
        </v-list-tile>
        <v-list-tile disabled @click>
          <v-list-tile-action>
            <v-icon>settings</v-icon>
          </v-list-tile-action>
          <v-list-tile-content>
            <v-list-tile-title>Settings</v-list-tile-title>
          </v-list-tile-content>
        </v-list-tile>
      </v-list>
    </v-navigation-drawer>
    <v-toolbar app fixed clipped-left>
      <v-toolbar-side-icon @click.stop="drawer = !drawer"></v-toolbar-side-icon>
      <v-toolbar-title>Application</v-toolbar-title>
    </v-toolbar>
    <div class="editor" style="border: 1px solid red; width: 100%;">
        <v-flex xs12 sm6 md3>
          <v-text-field
          readonly
            label="Regular"
            placeholder="Placeholder"
          ></v-text-field>
        </v-flex>

    </div>
    <v-footer app fixed>
      <span>&copy; 2017</span>
    </v-footer>
  </div>
</template>

<script>
export default {
  data: () => ({
    drawer: null
  }),
  props: {
    source: String
  }
};
</script>

Answer 1

您缺少v-content。你需要更换你的

<div class="editor" style="border: 1px solid red; width: 100%;">
    <v-flex xs12 sm6 md3>
      <v-text-field
      readonly
        label="Regular"
        placeholder="Placeholder"
      ></v-text-field>
    </v-flex>

</div>

与：

<v-content>
    <v-container fluid style="border: 1px solid red;">
        <v-text-field
             readonly
             label="Regular"
             placeholder="Placeholder"
      ></v-text-field>
    </v-container>
</v-content>

您可以阅读更多关于它的信息Here。

当您向v-container 添加更多元素时，它的高度会扩大。

如果你把fill-height 加到v-container 上，它会占用整个高度。