限制css中的最大页面长度

Question

我有一个Vue应用程序运行Vuetify，但这两个程序似乎都不适合处理我的愿望，即限制页面的最大长度，使其没有滚动。我希望这是有意义的。我的希望是，只要拉出一个屏幕与一堆路由到类似格式的屏幕。当然，用户可以使窗口变小，在这种情况下，我需要滚动。那么，当我希望页面打开到全屏时，我应该如何设置它呢?它的最大页面长度将阻止滚动，但如果由于用户调整页面大小而需要滚动，那么仍然允许滚动吗？

我花了几个小时寻找这方面的细节，但没有发现任何真正的直接解决方案。如何设置最大页长？CSS会提供这个吗？我看到了一个将CSS放入<head>-tag的解决方案，但是对于Vue应用程序，这个head标记的使用方式与典型的HTML页面不同。

编辑:因为我不清楚，因为我在vue/vue中工作，解决方案可能与一般情况不同，所以我认为最好提供我的App.vue和示例页面。

- App.vue

<template>
  <v-app>
    <app-toolbar></app-toolbar>
    <router-view></router-view>
    <app-footer></app-footer>
  </v-app>
</template>

<script>
import AppToolbar from "./components/AppToolbar.vue";
import AppFooter from "./components/AppFooter.vue";

export default {
  name: "App",

  components: {
    AppToolbar,
    AppFooter
  },

  data: () => ({
    //
  })
};
</script>
<style scoped></style>

- Homepage.vue

<template>
  <div>
    <v-app>
      <v-responsive aspect-ratio="16/9">
        <v-carousel cycle hide-delimiter-background show-arrows-on-hover>
          <v-carousel-item
            v-for="(item, i) in items"
            :key="i"
            :src="item.src"
            reverse-transition="fade-transition"
            transition="fade-transition"
          ></v-carousel-item>
        </v-carousel>
      </v-responsive>
    </v-app>
  </div>
</template>

<script>
export default {
  data() {
    return {
      items: [
        {
          src: "https://cdn.vuetifyjs.com/images/carousel/squirrel.jpg"
        },
        {
          src: "https://cdn.vuetifyjs.com/images/carousel/sky.jpg"
        },
        {
          src: "https://cdn.vuetifyjs.com/images/carousel/bird.jpg"
        },
        {
          src: "https://cdn.vuetifyjs.com/images/carousel/planet.jpg"
        }
      ]
    };
  }
};
</script>

<style></style>

编辑2:添加应用程序工具栏和应用程序页脚

- Toolbar.vue

  <template>
  <div>
    <v-toolbar dense color="#3F51B5" dark>
      <v-app-bar-nav-icon
        color="#76ff03"
        @click.stop="drawer = !drawer"
      ></v-app-bar-nav-icon>

      <v-btn to="/" color="#76ff03" text>Vuetification</v-btn>

      <v-spacer></v-spacer>
      <v-spacer></v-spacer>
      <v-spacer></v-spacer>
      <v-spacer></v-spacer>
      <v-spacer></v-spacer>
      <v-spacer></v-spacer>
      <v-spacer></v-spacer>
      <v-spacer></v-spacer>
      <v-row align="center" justify="center">
        <v-badge bordered color="error" icon="mdi-lock" overlap>
          <v-btn class="white--text" color="error" depressed>
            Lock Account
          </v-btn>
        </v-badge>

        <div class="mx-3"></div>

        <v-badge
          bordered
          bottom
          color="deep-purple accent-4"
          dot
          offset-x="10"
          offset-y="10"
        >
          <v-avatar size="40">
            <v-img src="https://cdn.vuetifyjs.com/images/lists/2.jpg"></v-img>
          </v-avatar>
        </v-badge>

        <div class="mx-3"></div>

        <v-badge avatar bordered overlap>
          <template v-slot:badge>
            <v-avatar>
              <v-img src="https://cdn.vuetifyjs.com/images/logos/v.png"></v-img>
            </v-avatar>
          </template>

          <v-avatar size="40">
            <v-img src="https://cdn.vuetifyjs.com/images/john.png"></v-img>
          </v-avatar>
        </v-badge>
      </v-row>
      <div class="hidden-sm-and-down">
        <v-btn icon>
          <v-icon color="#76ff03">mdi-magnify</v-icon>
        </v-btn>
        <v-btn icon>
          <v-icon color="#76ff03">mdi-heart</v-icon>
        </v-btn>
        <v-btn icon>
          <v-icon color="#76ff03">mdi-dots-vertical</v-icon>
        </v-btn>
        <v-btn color="#76ff03" text>About</v-btn>
        <v-btn to="/contact" color="#76ff03" text>Contact</v-btn>
        <v-btn to="/login" color="#76ff03" text>Login</v-btn>
      </div>
    </v-toolbar>

    <v-navigation-drawer
      v-model="drawer"
      expand-on-hover
      app
      temporary
      right
      height="160px"
    >
      <v-list-item>
        <v-list-item-avatar>
          <v-img src="https://randomuser.me/api/portraits/men/78.jpg"></v-img>
        </v-list-item-avatar>

        <v-list-item-content>
          <v-list-item-title>John Leider</v-list-item-title>
        </v-list-item-content>
      </v-list-item>

      <v-divider></v-divider>

      <v-list dense>
        <v-list-item v-for="item in items" :key="item.title" link>
          <v-list-item-icon>
            <v-icon>{{ item.icon }}</v-icon>
          </v-list-item-icon>

          <v-list-item-content>
            <v-list-item-title>{{ item.title }}</v-list-item-title>
          </v-list-item-content>
        </v-list-item>
      </v-list>
    </v-navigation-drawer>
  </div>
</template>
<script>
export default {
  data() {
    return {
      drawer: false,
      items: [
        { title: "Home", icon: "mdi-ghost" },
        { title: "About", icon: "mdi-kabaddi" }
      ]
    };
  }
};
</script>
<style scoped>
.toolbar-item {
  color: #76ff03;
}
</style>

- Footer.vue

plate>
  <v-app>
    <v-footer dark padless fixed>
      <v-card class="flex" text tile>
        <v-card-title class="teal">
          <strong class="subheading"
            >Get connected with us on social networks!</strong
          >

          <v-spacer></v-spacer>

          <v-btn v-for="icon in icons" :key="icon" class="mx-4" dark icon>
            <v-icon color="#76ff03" size="24px">{{ icon }}</v-icon>
          </v-btn>
        </v-card-title>

        <v-card-text class="text-center">
          <v-layout>
            <v-flex class="toolbar-item" v-for="(col, i) in rows" :key="i" xs3>
              <span class="body-2" v-text="col.title.toUpperCase()" />
              <div v-for="(child, i) in col.children" :key="i" v-text="child" />
            </v-flex>
            <v-flex class="toolbar-item" xd3 layout column>
              <span class="body-2">CONTACT</span>
              <div>
                <v-icon color="#76ff03" size="18px" class="mr-3"
                  >fa-home</v-icon
                >
                New York, NY 10012, US
              </div>
              <div>
                <v-icon color="#76ff03" size="18px" class="mr-3"
                  >fa-envelope</v-icon
                >
                info@example.com
              </div>
              <div>
                <v-icon color="#76ff03" size="18px" class="mr-3"
                  >fa-phone</v-icon
                >
                + 01 234 567 89
              </div>
              <div>
                <v-icon color="#76ff03" size="18px" class="mr-3"
                  >fa-print</v-icon
                >
                + 98 765 432 10
              </div>
            </v-flex>
          </v-layout>
          <strong> {{ new Date().getFullYear() }} — Vuetify </strong>
        </v-card-text>
      </v-card>
    </v-footer>
  </v-app>
</template>
<script>
export default {
  data: () => ({
    icons: [
      "fab fa-facebook",
      "fab fa-twitter",
      "fab fa-google-plus",
      "fab fa-linkedin",
      "fab fa-instagram"
    ],
    rows: [
      {
        title: "Company Name",
        children: [
          "Here you can use rows and columns here to organize your footer content. Lorem ipsum dolor sit amet, consectetur adipisicing elit"
        ]
      },
      {
        title: "Produts",
        children: [
          "MDBootstrap",
          "MDWordPress",
          "BrandFlow",
          "BootstrapAngular"
        ]
      },
      {
        title: "Useful Links",
        children: [
          "Your account",
          "Become an Affiliate",
          "Shipping Rates",
          "Helper"
        ]
      }
    ]
  })
};
</script>
<style scoped>
strong {
  color: #76ff03;
}
.toolbar-item {
  color: #76ff03;
}
</style

Answer 1

默认情况下，如果HTML内容大于窗口，浏览器将创建滚动条，如果它小于窗口，则不会有滚动。然而，我不认为这是你真正想要的。我想你是想改变窗户的尺寸。

我首先要说的是，它的修改用户浏览器窗口的大小是非常糟糕的做法。您应该努力使您的内容适合而不是。

尽管如此，由于Vue.js和Vuetify构建在Javascript上，因此您需要编写一些定制的JS来调整浏览器窗口的大小。overflow标签上的默认<body> (是的，那些存在于Vue应用程序中)将负责滚动.

window.resizeTo(width, height);

应该在Vue将内容呈现到屏幕上之后调用，以便在Vue的挂载生命周期钩中调用。

现在，我假设内容的高度会发生变化，因此您需要获取Vue app div的高度。

var newHeight = document.getElementById('app').innerHeight()

您还希望获得屏幕大小，这样就不会使窗口比屏幕大。您可以从screen对象获得这个高度。

var screenHeight = window.screen.height

所以

if(newHeight < screenHeight){
   window.resizeTo('800px', newHeight);
} else {
   window.resizeTo('800px', screenHeight);
}

在你做这个之前

您应该知道，大多数现代浏览器都会阻塞window.resizeTo()函数，因此您应该再次找到解决该问题的不同解决方案。

Answer 2

您可以将您的内容嵌套在另一个div element.If最大高度-您的内部div的高度等于其容器的高度，滚动条将永远不会出现。如果你想看到滚动条使用这个。

​

.scrollDiv {
    height:auto;
    max-height:150%;
    overflow:auto;   
}

​