vue单页面如何设置高度100%全屏

要让Vue单页面全屏，需要对HTML、body和Vue组件元素进行高度设置。

设置HTML和body元素高度

首先，为了在不同的浏览器中保证一致的表现效果，我们需要对HTML和body元素的高度设置一致。可以使用CSS设置：

html, body {
  height: 100%;
}

设置Vue组件元素高度

接下来，我们需要对Vue组件元素的高度进行设置。

示例1：使用min-height实现全屏

比较简单的方法是使用min-height属性，将元素的最小高度设置为100%。这样即使页面的内容不足一屏，该元素也能高度自适应。

下面是示例代码：

<template>
  <div class="container">
    <div class="full-screen-content">
      <!-- 页面内容 -->
    </div>
  </div>
</template>

<style>
.container {
  min-height: 100%;
}

.full-screen-content {
  min-height: calc(100% - 80px);  /* 减去页脚高度 */
}
</style>

在该示例中，我们将Vue组件容器元素（.container）的最小高度设置为100%，使得该元素可以充满整个屏幕。然后，我们再在该元素内部创建一个具有填充性质的元素（.full-screen-content），将其最小高度设置为“屏幕高度减去页脚高度（假设页脚高度为80px）”，从而实现在页面内容不足一屏的情况下依然保持全屏。

示例2：使用flex实现全屏

另一种方法是使用CSS3的flex布局。flex布局可以让元素自适应屏幕高度，而不需要指定高度的值。

下面是示例代码：

<template>
  <div class="container">
    <div class="flex-wrapper">
      <!-- 页面内容 -->
    </div>
  </div>
</template>

<style>
.container {
  display: flex;
  flex-direction: column;
  height: 100%;
}

.flex-wrapper {
  flex: 1;
}
</style>

在该示例中，我们将Vue组件容器元素设置为flex布局，并通过flex-direction属性设置主轴方向为从上到下的列布局。这样，flex容器会将其子元素拉伸到与容器本身等高。接着，我们将包裹页面内容的元素设置为flex:1，它会占据所有可用的空间，从而实现全屏。