Vue根节点div不占满屏幕

朱雀 2024-04-17 05:33 55阅读 0赞

问题现象：  
![在这里插入图片描述][20190822171847606.png]  
问题代码：

<template>
      <div class="home">
        <div class="home_title"></div>
        <div class="home_body"></div>
        <div class="home_footer"></div>
      </div>
    </template>

.home/*设置占满屏幕*/ { 
      background-color: red;
      width: 100%;
      height: 100px;
      margin: 0;
    }
    .home_title { 
      width: 100%;
      height: 60px;
      background-color: #0593d3;
      margin: 0;
    }

解决后效果：  
![在这里插入图片描述][watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3lhbmdzaHVhaW9ubGluZQ_size_16_color_FFFFFF_t_70]  
解决CSS代码：

.home,/*设置占满*/
    html, body { 
      background-color: red;
      width: 100%;
      height: 100%;
      margin: 0;
    }
    .home_title { 
      width: 100%;
      height: 60px;
      background-color: #0593d3;
      margin: 0;
    }

[20190822171847606.png]: https://image.dandelioncloud.cn/pgy_files/images/2024/04/11/3d6a2904dee44139818eb703d0d7aa2b.png
[watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3lhbmdzaHVhaW9ubGluZQ_size_16_color_FFFFFF_t_70]: https://image.dandelioncloud.cn/pgy_files/images/2024/04/11/8cad1f23be39482aace22d49ad99f7fa.png

发表评论取消回复

表情：

评论列表（有 0 条评论，55人围观）

还没有评论，来说两句吧...

相关阅读

相关 Vue根节点div不占满屏幕

题现象： ![在这里插入图片描述][20190822171847606.png] 问题代码： <template> <div class="...

朱雀/ 2024年04月17日 05:33/ 0 赞/ 55 阅读

相关 div自适应占满剩余宽度；当width:100%不适用时

因为我打算把下图中红色框中的按钮放到这一行的最后 ![e6cfcde233a443c093ede247004668e5.png][] 但是我给按钮中的div给width为

拼搏现实的明天。/ 2024年03月22日 14:49/ 0 赞/ 81 阅读

相关如何让 div 铺满整个屏幕

![watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3FxXzQw

以你之姓@/ 2023年02月23日 08:51/ 0 赞/ 267 阅读

相关 div背景图自适应占满

css代码： background-image: url(../imgs/footerkuang.png); background-repeat: no-re

女爷i/ 2022年12月21日 04:54/ 0 赞/ 154 阅读

相关 element布局容器怎么占满屏幕

![在这里插入图片描述][watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ub

电玩女神/ 2022年11月12日 04:10/ 0 赞/ 337 阅读

相关 DrawerLayout布局使用，打开与关闭，DrawerLayout占满全屏幕

从左边打开 mDrawerLayout.openDrawer(GravityCompat.START); 从右边打开 mDrawerLayout

旧城等待，/ 2022年10月26日 12:59/ 0 赞/ 544 阅读

相关 html页面撑满整屏幕,让div撑满整个屏幕的方法（css）

这篇文章主要介绍了关于让div撑满整个屏幕的方法(css)，有着一定的参考价值，现在分享给大家，有需要的朋友可以参考一下在body只有一个p的时候，可以通过这样的方式让p撑

╰+哭是因爲堅強的太久メ/ 2022年10月06日 11:44/ 0 赞/ 1055 阅读

相关让body、Div占满整个浏览器的窗口

今天在研究百度首页的时候，发现内部的div总是能铺满整个窗口，这对于我们自适应页面制作是非常有帮助的。仔细查看之后，发现是因为设置了： html,body{

桃扇骨/ 2022年09月25日 09:18/ 0 赞/ 211 阅读

相关微信小程序中图片占满整个屏幕实现方法

将body和html设置为100%，这样我们就可以在他们的子元素中使用height:100%来使的我们的容器元素占满屏幕的高度啦。但是在微信小程序中，是没有dom对象的，根

太过爱你忘了你带给我的痛/ 2022年07月13日 14:45/ 0 赞/ 982 阅读

相关 div 不能占满整个页面

在页面中，有时候我们想自己写个遮罩层，让它的宽度和高度都占满整个可见页面区域，css设置好了，但是还是没有得到想要的效果。遮罩层用<div>表示，是body的直接子元素

小咪咪/ 2022年06月08日 03:52/ 0 赞/ 283 阅读