html - 看不到最后的滚动 block

标签 html css vuejs2 vuetify.js

我有以下基于 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>

如您所见:

enter image description here

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

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

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

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

最佳答案

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

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

这里我们假设您的其他元素高度为 275px,因此您只需从 100vh(.output) 减去 275px,如下所示

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

现在您只需要找出所有其他元素的高度,例如 v-app-barv-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>

关于html - 看不到最后的滚动 block ,我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/57620785/

相关文章:

javascript - Bootstrap 4着陆页添加到右侧图像不能正确放置

javascript - 从 Vue.js 组件调用方法

javascript - Vue js - 过滤具有多列的表格

javascript - 颜色转换 JavaScript

jQuery 幻灯片在自定义 Wordpress 模板中的一张图片后停止

css - Vue.js 动态 &lt;style&gt; 带变量

html - 如何使用 CSS 自动调整表单元素的宽度?

java - 在 JLabel 中使用 HTML 创建一个栏

javascript - HTML5 文件 API : get File object within FileReader callback

javascript - 如何使用 google chart onclick bootstrap 选项卡按钮修复宽度和高度?