【微信小程序】使页面使内容充满整个屏幕、height 100%不起作用的解决方案

ゝ一纸荒年。 2023-06-30 09:17 79阅读 0赞

这两天做小程序启动页的时候发现在view标签上设置 height：100%；是没有作用的，其实这个问题也是经常遇到一直没太注意，这次研究了一下写几个解决方案。如下：  
一、在css里面用page控制

page{ 
        height:100%;//这样你在页面中的view设置height:100%就起作用了
    }

二、height的单位用vh

view{ 
    	 height:100vh;//相对于视口的高度。视口被均分为100单位的vh，100vh就是充满整个屏幕了
    }

这两种确实是可以让你设置的height有效，但是设置的高度是包括你的顶部导航以及底部导航的，所以会超出屏幕有滚动条。想要设置那种一张图占一个屏幕的、没有滚动条啥的看下面一条  
三、  
1、  
css

.mask-layer{ 
        position: fixed;
        top: 0;
        left: 0;
        bottom: 0;
        right: 0;
        display: flex;
        justify-content: center;
        align-items: center;
        background: rgba(0, 0, 0, 0.6);
        z-index: 5;
    }

wxml

<view class="shade">
    		<view style="width:600rpx;height:300rpx;">
    			//这里面写你想展示的东西
    		</view>
    	</view>

效果图如下

![在这里插入图片描述][watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L1pfa2Vuc2hvdQ_size_16_color_FFFFFF_t_70]  
这个适合一些弹窗操作啥的

2、  
css

.auto{ 
        position: fixed;
        top: 0;
        left: 0;
        right: 0;
        bottom: 0;
    }

wxml

效果图  
![在这里插入图片描述][watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L1pfa2Vuc2hvdQ_size_16_color_FFFFFF_t_70 1]  
这个是图片完全充满屏幕 适合启动页、当页面的后台数据没返回的时候展示的一些占位图片啥的

[watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L1pfa2Vuc2hvdQ_size_16_color_FFFFFF_t_70]: https://img-blog.csdnimg.cn/20200116182208489.png?x-oss-process=image/watermark,type_ZmFuZ3poZW5naGVpdGk,shadow_10,text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L1pfa2Vuc2hvdQ==,size_16,color_FFFFFF,t_70
[watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L1pfa2Vuc2hvdQ_size_16_color_FFFFFF_t_70 1]: https://img-blog.csdnimg.cn/20200116182739313.png?x-oss-process=image/watermark,type_ZmFuZ3poZW5naGVpdGk,shadow_10,text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L1pfa2Vuc2hvdQ==,size_16,color_FFFFFF,t_70