• 【Vue】Vue中使一个div铺满全屏

    在Vue中实现div全屏铺满的方式与纯CSS实现类似，只是在Vue组件中应用CSS的方式略有不同。

    最近在项目开发中，就遇到了这个问题，特此记录一下，方便大伙避坑。

    有这么一段代码：

    1. <template>
    2.   <div class="fullscreen-div">
    3.     <!-- 内容区域 -->
    4.   </div>
    5. </template>
    6.  
    7. <script>
    8. export default {
    9.   name: 'MyComponent',
    10. }
    11. </script>
    12.  
    13. <style scoped>
    14.  
    15. </style>

    在css中常要的三种铺满全屏方式：

    1. 使用vh和vw单位
    2. 使用绝对定位和100%宽高
    3. 使用Flexbox布局

    比如我们使用第二种：

    1. <style scoped>
    2. .fullscreen-div {
    3.   position: absolute;
    4.   top: 0;
    5.   left: 0;
    6.   width: 100%;
    7.   height: 100%;
    8. }
    9. style>

    在这个示例中，我们在Vue组件中定义了一个名为MyComponent的组件，其中包含一个类名为fullscreen-div的div元素。

    通过在