vue布局 container 铺满整个页面

在Vue中，要实现一个布局容器（container）铺满整个页面，通常需要使用CSS样式来达成这个效果。这通常涉及设置容器的高度为100%或者视口高度（100vh），并确保没有其他元素或者边距（margin）限制了容器的扩展。以下是一个简单的实现方法：

1. 给容器设置高度为100%，这意味着容器的高度将会是其父元素的高度，如果父元素高度没有明确设置，那么就会是浏览器视口的高度。

2. 可以使用CSS的视口单位vh（1vh等于视口高度的1%），设置容器高度为100vh，这样容器就能恰好填满整个视口的高度。

3. 确保没有其他的CSS样式（比如margin或padding）影响容器的高度。

4. 如果需要，你也可以添加`width: 100vw;`来让容器在水平方向上也铺满整个视口宽度。

下面是一个简单的示例代码：

<template>
  <div id="app">
    <div class="full-height-container">
      <!-- 页面内容 -->
    </div>
  </div>
</template>

<style>
#app {
  height: 100%; /* 确保父元素也有足够的高度 */
}

.full-height-container {
  height: 100vh; /* 高度为视口高度 */
  width: 100%; /* 如果需要，宽度也可以设置为100% */
  /* 其他样式如background-color可以根据需要添加 */
}
</style>

这段代码创建了一个`.full-height-container`类，该类使得元素高度占满整个视口高度。注意，如果`.full-height-container`的父元素没有足够的高度，那么`100vh`可能不会生效，因此在上述CSS中也给`#app`设置了`height: 100%;`。