html - Vue中如何将容器浮动到页面底部？

问题描述

我目前正在使用 VueJS 开发一个非常简单的网站。我想在页面底部有一个浮动容器，我知道如何使用普通 CSS 来做到这一点，但是因为 Vue 和 Vuetify 中有很多选项，我认为这个问题应该可以通过某种标签来解决.

我当前的代码是：

<template>
  <div class="content">
    <v-container class="test-container" grid-list-md text-xs-center fluid>
      <v-layout row wrap>
        <v-flex xl12>
          <v-card dark color="primary">
            <v-card-text class="px-0">Test</v-card-text>
          </v-card>
        </v-flex>
      </v-layout>

      <v-layout row justify-space-around>
        <v-flex xs4>
          <v-card dark color="primary">
            <v-card-text>Test</v-card-text>
          </v-card>
        </v-flex>
        <v-flex xs4>
          <v-card dark color="accent">
            <v-card-text>Test</v-card-text>
          </v-card>
        </v-flex>
      </v-layout>

      <v-layout row justify-space-between>
        <v-flex xs4>
          <v-card dark color="primary">
            <v-card-text>Test</v-card-text>
          </v-card>
        </v-flex>
        <v-flex xs4>
          <v-card dark color="accent">
            <v-card-text>Test</v-card-text>
          </v-card>
        </v-flex>
      </v-layout>

      <v-layout row wrap>
        <v-flex xl12>
          <v-text-field v-model="txtRequestText" box label="Test" type="text" prepend-inner-icon="place" append-icon="send" @click:append="sendRequest" @keyup.enter="sendRequest"></v-text-field>
        </v-flex>
      </v-layout>
    </v-container>
  </div>
</template>

最后一个带有 Textfield 的 v-layout 应该显示在页面的最底部。

我已经尝试在 v-container 上使用 align-end 并将容器的高度设置为 100%，然后在其中一个布局上使用 align-end，但这根本不起作用。

是否有这样做的最佳实践方法，或者我应该用普通的 CSS 来解决它？

-编辑-
在这里你也有它的工作版本：

new Vue({
  el: '#app',
  data() {
    return {
    }
  }

})

<script src="https://cdnjs.cloudflare.com/ajax/libs/vue/2.5.17/vue.js"></script>
<script src="https://cdn.jsdelivr.net/npm/vuetify@1.3.0/dist/vuetify.min.js"></script>
<link rel="stylesheet" type="text/css" href="https://cdn.jsdelivr.net/npm/vuetify@1.3.0/dist/vuetify.min.css">
<div id="app" class="content" data-app>
  <v-container class="test-container" grid-list-md text-xs-center fluid>
    <v-layout row wrap>
      <v-flex xl12>
        <v-card dark color="primary">
          <v-card-text class="px-0">Test</v-card-text>
        </v-card>
      </v-flex>
    </v-layout>

    <v-layout row justify-space-around>
      <v-flex xs4>
        <v-card dark color="primary">
          <v-card-text>Test</v-card-text>
        </v-card>
      </v-flex>
      <v-flex xs4>
        <v-card dark color="accent">
          <v-card-text>Test</v-card-text>
        </v-card>
      </v-flex>
    </v-layout>

    <v-layout row justify-space-between>
      <v-flex xs4>
        <v-card dark color="primary">
          <v-card-text>Test</v-card-text>
        </v-card>
      </v-flex>
      <v-flex xs4>
        <v-card dark color="accent">
          <v-card-text>Test</v-card-text>
        </v-card>
      </v-flex>
    </v-layout>

    <v-layout row wrap>
      <v-flex xl12>
        <v-text-field box label="Test" type="text"></v-text-field>
      </v-flex>
    </v-layout>
  </v-container>
</div>

标签： htmlvue.jsvuetify.js

html - Vue中如何将容器浮动到页面底部？

问题描述

解决方案

推荐阅读