vue实现屏幕撑满

Vue 实现屏幕撑满的方法

在 Vue 项目中实现屏幕撑满通常涉及 CSS 和 Vue 组件的布局设置。以下是几种常见方法：

使用 CSS 设置根元素高度

通过设置 html、body 和根组件的高度为 100%，确保页面撑满整个屏幕。

html, body {
  height: 100%;
  margin: 0;
  padding: 0;
}

#app {
  height: 100%;
}

使用 Flex 布局

通过 Flex 布局让子元素自动填充剩余空间。

#app {
  display: flex;
  flex-direction: column;
  min-height: 100vh;
}

使用 Viewport 单位

直接使用 vh（视口高度单位）实现撑满效果。

#app {
  height: 100vh;
}

动态计算高度

在 Vue 组件中动态计算高度，适用于需要排除导航栏或其他固定高度元素的情况。

export default {
  mounted() {
    this.$nextTick(() => {
      const windowHeight = window.innerHeight;
      const element = this.$el;
      element.style.height = `${windowHeight}px`;
    });
  }
}

使用 CSS Grid 布局

通过 CSS Grid 实现复杂的撑满布局。

#app {
  display: grid;
  grid-template-rows: 1fr;
  height: 100vh;
}

注意事项

• 检查父元素是否有 overflow: hidden 或其他限制性样式。
• 移动端可能需要处理 viewport 的 meta 标签。
• 嵌套组件可能需要逐层设置高度为 100%。

以上方法可以根据具体需求选择或组合使用。