html - 最后看不到滚动 block

Question

我有以下基于 vuejs 和 vuetify 的 Web 应用程序:

new Vue({
  el: '#app',
  vuetify: new Vuetify(),

})

body {
  overflow: hidden;
  height: 100vh;
}

.stretch {
  height: 100%;
  width: 100%;
}

.output {
  height: 100vh;
  width: 100%;
  overflow-y: scroll;
}

<link href='https://fonts.googleapis.com/css?family=Roboto:300,400,500,700|Material+Icons' rel="stylesheet" type="text/css">
<script src="https://unpkg.com/vue/dist/vue.js"></script>
<link href="https://unpkg.com/vuetify/dist/vuetify.min.css" rel="stylesheet" type="text/css">
<script src="https://unpkg.com/vuetify/dist/vuetify.min.js"></script>

<div id="app">
  <v-app>
    <v-app-bar color="deep-purple accent-4" dark app>
      <v-app-bar-nav-icon></v-app-bar-nav-icon>

      <v-toolbar-title>Page title</v-toolbar-title>


    </v-app-bar>

    <!-- Sizes your content based upon application components -->
    <v-content>

      <!-- Provides the application the proper gutter -->
      <v-container class="pa-0 stretch" fluid>

        <v-row class="mb-5" justify="center">
          <v-card max-width="280">
            <v-list-item>
              <v-list-item-icon>
                <v-icon large color="teal darken-2">mdi-email</v-icon>
              </v-list-item-icon>

              <v-list-item-content>
                <v-list-item-title class="headline">Messages</v-list-item-title>

                <v-list-item-subtitle>overview of all messages</v-list-item-subtitle>
              </v-list-item-content>
            </v-list-item>

            <v-card-text>
              <v-row align="center" justify="center" no-gutters>
                <v-col cols="5">
                  <p class="title">SYSTEM1</p>
                </v-col>

                <v-col cols="5">
                  <p class="subtitle-1">1111111111</p>
                </v-col>
              </v-row>

              <v-row justify="center" no-gutters>
                <v-col cols="5">
                  <p class="title">SYSTEM2</p>
                </v-col>

                <v-col cols="5">
                  <p class="subtitle-1">111111111</p>
                </v-col>
              </v-row>
            </v-card-text>
          </v-card>
          <v-card max-width="280">
            <v-list-item>
              <v-list-item-icon>
                <v-icon large color="teal darken-2">mdi-email</v-icon>
              </v-list-item-icon>

              <v-list-item-content>
                <v-list-item-title class="headline">Messages</v-list-item-title>

                <v-list-item-subtitle>overview of all messages</v-list-item-subtitle>
              </v-list-item-content>
            </v-list-item>

            <v-card-text>
              <v-row align="center" justify="center" no-gutters>
                <v-col cols="5">
                  <p class="title">SYSTEM1</p>
                </v-col>

                <v-col cols="5">
                  <p class="subtitle-1">1111111111</p>
                </v-col>
              </v-row>

              <v-row justify="center" no-gutters>
                <v-col cols="5">
                  <p class="title">SYSTEM2</p>
                </v-col>

                <v-col cols="5">
                  <p class="subtitle-1">111111111</p>
                </v-col>
              </v-row>
            </v-card-text>
          </v-card>
        </v-row>


        <v-row no-gutters class="output" justify="center">
          <v-col cols="7">
            <v-banner two-line>
              <v-avatar slot="icon" color="deep-purple accent-4" size="40">
                <v-icon icon="mdi-lock" color="white">
                  mdi-lock
                </v-icon>
              </v-avatar>

              Three line text string example with two actions. One to two lines is preferable. Three lines should be considered the maximum string length on desktop in order to keep messages short and actionable.
            </v-banner>
            <v-banner two-line>
              <v-avatar slot="icon" color="deep-purple accent-4" size="40">
                <v-icon icon="mdi-lock" color="white">
                  mdi-lock
                </v-icon>
              </v-avatar>

              Three line text string example with two actions. One to two lines is preferable. Three lines should be considered the maximum string length on desktop in order to keep messages short and actionable.
            </v-banner>
            <v-banner two-line>
              <v-avatar slot="icon" color="deep-purple accent-4" size="40">
                <v-icon icon="mdi-lock" color="white">
                  mdi-lock
                </v-icon>
              </v-avatar>

              Three line text string example with two actions. One to two lines is preferable. Three lines should be considered the maximum string length on desktop in order to keep messages short and actionable.
            </v-banner>
            <v-banner two-line>
              <v-avatar slot="icon" color="deep-purple accent-4" size="40">
                <v-icon icon="mdi-lock" color="white">
                  mdi-lock
                </v-icon>
              </v-avatar>

              Three line text string example with two actions. One to two lines is preferable. Three lines should be considered the maximum string length on desktop in order to keep messages short and actionable.
            </v-banner>
            <v-banner two-line>
              <v-avatar slot="icon" color="deep-purple accent-4" size="40">
                <v-icon icon="mdi-lock" color="white">
                  mdi-lock
                </v-icon>
              </v-avatar>

              Three line text string example with two actions. One to two lines is preferable. Three lines should be considered the maximum string length on desktop in order to keep messages short and actionable.
            </v-banner>
            <v-banner two-line>
              <v-avatar slot="icon" color="deep-purple accent-4" size="40">
                <v-icon icon="mdi-lock" color="white">
                  mdi-lock
                </v-icon>
              </v-avatar>

              Three line text string example with two actions. One to two lines is preferable. Three lines should be considered the maximum string length on desktop in order to keep messages short and actionable.
            </v-banner>
            <v-banner two-line>
              <v-avatar slot="icon" color="deep-purple accent-4" size="40">
                <v-icon icon="mdi-lock" color="white">
                  mdi-lock
                </v-icon>
              </v-avatar>

              Three line text string example with two actions. One to two lines is preferable. Three lines should be considered the maximum string length on desktop in order to keep messages short and actionable.
            </v-banner>
            <v-banner two-line>
              <v-avatar slot="icon" color="deep-purple accent-4" size="40">
                <v-icon icon="mdi-lock" color="white">
                  mdi-lock
                </v-icon>
              </v-avatar>

              Three line text string example with two actions. One to two lines is preferable. Three lines should be considered the maximum string length on desktop in order to keep messages short and actionable.
            </v-banner>
            <v-banner two-line>
              <v-avatar slot="icon" color="deep-purple accent-4" size="40">
                <v-icon icon="mdi-lock" color="white">
                  mdi-lock
                </v-icon>
              </v-avatar>

              Three line text string example with two actions. One to two lines is preferable. Three lines should be considered the maximum string length on desktop in order to keep messages short and actionable.
            </v-banner>
            <v-banner two-line>
              <v-avatar slot="icon" color="deep-purple accent-4" size="40">
                <v-icon icon="mdi-lock" color="white">
                  mdi-lock
                </v-icon>
              </v-avatar>

              Three line text string example with two actions. One to two lines is preferable. Three lines should be considered the maximum string length on desktop in order to keep messages short and actionable.
            </v-banner>
            <v-banner two-line>
              <v-avatar slot="icon" color="deep-purple accent-4" size="40">
                <v-icon icon="mdi-lock" color="white">
                  mdi-lock
                </v-icon>
              </v-avatar>

              Three line text string example with two actions. One to two lines is preferable. Three lines should be considered the maximum string length on desktop in order to keep messages short and actionable.
            </v-banner>
            <v-banner two-line>
              <v-avatar slot="icon" color="deep-purple accent-4" size="40">
                <v-icon icon="mdi-lock" color="white">
                  mdi-lock
                </v-icon>
              </v-avatar>

              Three line text string example with two actions. One to two lines is preferable. Three lines should be considered the maximum string length on desktop in order to keep messages short and actionable.
            </v-banner>
            <v-banner two-line>
              <v-avatar slot="icon" color="deep-purple accent-4" size="40">
                <v-icon icon="mdi-lock" color="white">
                  mdi-lock
                </v-icon>
              </v-avatar>

              Three line text string example with two actions. One to two lines is preferable. Three lines should be considered the maximum string length on desktop in order to keep messages short and actionable.
            </v-banner>
            <v-banner two-line>
              <v-avatar slot="icon" color="deep-purple accent-4" size="40">
                <v-icon icon="mdi-lock" color="white">
                  mdi-lock
                </v-icon>
              </v-avatar>

              Three line text string example with two actions. One to two lines is preferable. Three lines should be considered the maximum string length on desktop in order to keep messages short and actionable.
            </v-banner>
            <v-banner two-line>
              <v-avatar slot="icon" color="deep-purple accent-4" size="40">
                <v-icon icon="mdi-lock" color="white">
                  mdi-lock
                </v-icon>
              </v-avatar>

              Three line text string example with two actions. One to two lines is preferable. Three lines should be considered the maximum string length on desktop in order to keep messages short and actionable.
            </v-banner>
            <v-banner two-line>
              <v-avatar slot="icon" color="deep-purple accent-4" size="40">
                <v-icon icon="mdi-lock" color="white">
                  mdi-lock
                </v-icon>
              </v-avatar>

              Three line text string example with two actions. One to two lines is preferable. Three lines should be considered the maximum string length on desktop in order to keep messages short and actionable.
            </v-banner>
            <v-banner two-line>
              <v-avatar slot="icon" color="deep-purple accent-4" size="40">
                <v-icon icon="mdi-lock" color="white">
                  mdi-lock
                </v-icon>
              </v-avatar>

              Three line text string example with two actions. One to two lines is preferable. Three lines should be considered the maximum string length on desktop in order to keep messages short and actionable.
            </v-banner>
            <v-banner two-line>
              <v-avatar slot="icon" color="deep-purple accent-4" size="40">
                <v-icon icon="mdi-lock" color="white">
                  mdi-lock
                </v-icon>
              </v-avatar>

              Three line text string example with two actions. One to two lines is preferable. Three lines should be considered the maximum string length on desktop in order to keep messages short and actionable.
            </v-banner>
          </v-col>
        </v-row>
      </v-container>
    </v-content>
  </v-app>
</div>

如你所见:

我可以向下滚动，但不能滚动到框的末尾。我用红色边框标记了它。

具体缺少什么？在 JSFiddle 上更清楚:

https://jsfiddle.net/zero_coder/1k4bt9jm/4/ . 不要忘记按运行!!

我想避免整个页面滚动，只提供内部滚动 <v-row no-gutters class="output" justify="center">阻止。

Answer 1

这里我有一个解决方案..

你只需要从 .output 的 100vh 高度减去所有其他元素的高度

这里我们假设你的其他元素的高度是 275px 所以你只需要从 100vh(.output) 减去 275px 如下

.output{
   height:calc(100vh - 275px);
}

现在您只需要找出所有其他元素的高度，例如 v-app-bar、v-row 等。

new Vue({
  el: '#app',
  vuetify: new Vuetify(),

})

body {
  overflow: hidden;
  height: 100vh;
}

.stretch {
  height: 100%;
  width: 100%;
}

.output {
  height: calc(100vh - 275px);
  width: 100%;
  overflow-y: scroll;
}

<link href='https://fonts.googleapis.com/css?family=Roboto:300,400,500,700|Material+Icons' rel="stylesheet" type="text/css">
<script src="https://unpkg.com/vue/dist/vue.js"></script>
<link href="https://unpkg.com/vuetify/dist/vuetify.min.css" rel="stylesheet" type="text/css">
<script src="https://unpkg.com/vuetify/dist/vuetify.min.js"></script>

<div id="app">
  <v-app>
    <v-app-bar color="deep-purple accent-4" dark app>
      <v-app-bar-nav-icon></v-app-bar-nav-icon>

      <v-toolbar-title>Page title</v-toolbar-title>


    </v-app-bar>

    <!-- Sizes your content based upon application components -->
    <v-content>

      <!-- Provides the application the proper gutter -->
      <v-container class="pa-0 stretch" fluid>

        <v-row class="mb-5" justify="center">
          <v-card max-width="280">
            <v-list-item>
              <v-list-item-icon>
                <v-icon large color="teal darken-2">mdi-email</v-icon>
              </v-list-item-icon>

              <v-list-item-content>
                <v-list-item-title class="headline">Messages</v-list-item-title>

                <v-list-item-subtitle>overview of all messages</v-list-item-subtitle>
              </v-list-item-content>
            </v-list-item>

            <v-card-text>
              <v-row align="center" justify="center" no-gutters>
                <v-col cols="5">
                  <p class="title">SYSTEM1</p>
                </v-col>

                <v-col cols="5">
                  <p class="subtitle-1">1111111111</p>
                </v-col>
              </v-row>

              <v-row justify="center" no-gutters>
                <v-col cols="5">
                  <p class="title">SYSTEM2</p>
                </v-col>

                <v-col cols="5">
                  <p class="subtitle-1">111111111</p>
                </v-col>
              </v-row>
            </v-card-text>
          </v-card>
          <v-card max-width="280">
            <v-list-item>
              <v-list-item-icon>
                <v-icon large color="teal darken-2">mdi-email</v-icon>
              </v-list-item-icon>

              <v-list-item-content>
                <v-list-item-title class="headline">Messages</v-list-item-title>

                <v-list-item-subtitle>overview of all messages</v-list-item-subtitle>
              </v-list-item-content>
            </v-list-item>

            <v-card-text>
              <v-row align="center" justify="center" no-gutters>
                <v-col cols="5">
                  <p class="title">SYSTEM1</p>
                </v-col>

                <v-col cols="5">
                  <p class="subtitle-1">1111111111</p>
                </v-col>
              </v-row>

              <v-row justify="center" no-gutters>
                <v-col cols="5">
                  <p class="title">SYSTEM2</p>
                </v-col>

                <v-col cols="5">
                  <p class="subtitle-1">111111111</p>
                </v-col>
              </v-row>
            </v-card-text>
          </v-card>
        </v-row>


        <v-row no-gutters class="output" justify="center">
          <v-col cols="7">
            <v-banner two-line>
              <v-avatar slot="icon" color="deep-purple accent-4" size="40">
                <v-icon icon="mdi-lock" color="white">
                  mdi-lock
                </v-icon>
              </v-avatar>

              Three line text string example with two actions. One to two lines is preferable. Three lines should be considered the maximum string length on desktop in order to keep messages short and actionable.
            </v-banner>
            <v-banner two-line>
              <v-avatar slot="icon" color="deep-purple accent-4" size="40">
                <v-icon icon="mdi-lock" color="white">
                  mdi-lock
                </v-icon>
              </v-avatar>

              Three line text string example with two actions. One to two lines is preferable. Three lines should be considered the maximum string length on desktop in order to keep messages short and actionable.
            </v-banner>
            <v-banner two-line>
              <v-avatar slot="icon" color="deep-purple accent-4" size="40">
                <v-icon icon="mdi-lock" color="white">
                  mdi-lock
                </v-icon>
              </v-avatar>

              Three line text string example with two actions. One to two lines is preferable. Three lines should be considered the maximum string length on desktop in order to keep messages short and actionable.
            </v-banner>
            <v-banner two-line>
              <v-avatar slot="icon" color="deep-purple accent-4" size="40">
                <v-icon icon="mdi-lock" color="white">
                  mdi-lock
                </v-icon>
              </v-avatar>

              Three line text string example with two actions. One to two lines is preferable. Three lines should be considered the maximum string length on desktop in order to keep messages short and actionable.
            </v-banner>
            <v-banner two-line>
              <v-avatar slot="icon" color="deep-purple accent-4" size="40">
                <v-icon icon="mdi-lock" color="white">
                  mdi-lock
                </v-icon>
              </v-avatar>

              Three line text string example with two actions. One to two lines is preferable. Three lines should be considered the maximum string length on desktop in order to keep messages short and actionable.
            </v-banner>
            <v-banner two-line>
              <v-avatar slot="icon" color="deep-purple accent-4" size="40">
                <v-icon icon="mdi-lock" color="white">
                  mdi-lock
                </v-icon>
              </v-avatar>

              Three line text string example with two actions. One to two lines is preferable. Three lines should be considered the maximum string length on desktop in order to keep messages short and actionable.
            </v-banner>
            <v-banner two-line>
              <v-avatar slot="icon" color="deep-purple accent-4" size="40">
                <v-icon icon="mdi-lock" color="white">
                  mdi-lock
                </v-icon>
              </v-avatar>

              Three line text string example with two actions. One to two lines is preferable. Three lines should be considered the maximum string length on desktop in order to keep messages short and actionable.
            </v-banner>
            <v-banner two-line>
              <v-avatar slot="icon" color="deep-purple accent-4" size="40">
                <v-icon icon="mdi-lock" color="white">
                  mdi-lock
                </v-icon>
              </v-avatar>

              Three line text string example with two actions. One to two lines is preferable. Three lines should be considered the maximum string length on desktop in order to keep messages short and actionable.
            </v-banner>
            <v-banner two-line>
              <v-avatar slot="icon" color="deep-purple accent-4" size="40">
                <v-icon icon="mdi-lock" color="white">
                  mdi-lock
                </v-icon>
              </v-avatar>

              Three line text string example with two actions. One to two lines is preferable. Three lines should be considered the maximum string length on desktop in order to keep messages short and actionable.
            </v-banner>
            <v-banner two-line>
              <v-avatar slot="icon" color="deep-purple accent-4" size="40">
                <v-icon icon="mdi-lock" color="white">
                  mdi-lock
                </v-icon>
              </v-avatar>

              Three line text string example with two actions. One to two lines is preferable. Three lines should be considered the maximum string length on desktop in order to keep messages short and actionable.
            </v-banner>
            <v-banner two-line>
              <v-avatar slot="icon" color="deep-purple accent-4" size="40">
                <v-icon icon="mdi-lock" color="white">
                  mdi-lock
                </v-icon>
              </v-avatar>

              Three line text string example with two actions. One to two lines is preferable. Three lines should be considered the maximum string length on desktop in order to keep messages short and actionable.
            </v-banner>
            <v-banner two-line>
              <v-avatar slot="icon" color="deep-purple accent-4" size="40">
                <v-icon icon="mdi-lock" color="white">
                  mdi-lock
                </v-icon>
              </v-avatar>

              Three line text string example with two actions. One to two lines is preferable. Three lines should be considered the maximum string length on desktop in order to keep messages short and actionable.
            </v-banner>
            <v-banner two-line>
              <v-avatar slot="icon" color="deep-purple accent-4" size="40">
                <v-icon icon="mdi-lock" color="white">
                  mdi-lock
                </v-icon>
              </v-avatar>

              Three line text string example with two actions. One to two lines is preferable. Three lines should be considered the maximum string length on desktop in order to keep messages short and actionable.
            </v-banner>
            <v-banner two-line>
              <v-avatar slot="icon" color="deep-purple accent-4" size="40">
                <v-icon icon="mdi-lock" color="white">
                  mdi-lock
                </v-icon>
              </v-avatar>

              Three line text string example with two actions. One to two lines is preferable. Three lines should be considered the maximum string length on desktop in order to keep messages short and actionable.
            </v-banner>
            <v-banner two-line>
              <v-avatar slot="icon" color="deep-purple accent-4" size="40">
                <v-icon icon="mdi-lock" color="white">
                  mdi-lock
                </v-icon>
              </v-avatar>

              Three line text string example with two actions. One to two lines is preferable. Three lines should be considered the maximum string length on desktop in order to keep messages short and actionable.
            </v-banner>
            <v-banner two-line>
              <v-avatar slot="icon" color="deep-purple accent-4" size="40">
                <v-icon icon="mdi-lock" color="white">
                  mdi-lock
                </v-icon>
              </v-avatar>

              Three line text string example with two actions. One to two lines is preferable. Three lines should be considered the maximum string length on desktop in order to keep messages short and actionable.
            </v-banner>
            <v-banner two-line>
              <v-avatar slot="icon" color="deep-purple accent-4" size="40">
                <v-icon icon="mdi-lock" color="white">
                  mdi-lock
                </v-icon>
              </v-avatar>

              Three line text string example with two actions. One to two lines is preferable. Three lines should be considered the maximum string length on desktop in order to keep messages short and actionable.
            </v-banner>
            <v-banner two-line>
              <v-avatar slot="icon" color="deep-purple accent-4" size="40">
                <v-icon icon="mdi-lock" color="white">
                  mdi-lock
                </v-icon>
              </v-avatar>

              Three line text string example with two actions. One to two lines is preferable. Three lines should be considered the maximum string length on desktop in order to keep messages short and actionable.
            </v-banner>
          </v-col>
        </v-row>
      </v-container>
    </v-content>
  </v-app>
</div>