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，它将占据整个高度。

内容大小-Vuetify

1 个答案: