![[捂脸]](http://lf-web-assets.juejin.cn/obj/juejin-web/xitu_juejin_web/img/jj_emoji_28.8981538.png)
- #新人报道# 想追一个人,之前我撩过他,被他明确说当我妹妹,但是总觉得他跟我聊天的超出了哥哥妹妹的范围,我觉得他在勾引我,这个软件他推的,估计也会被他发现
0 赞 · 49 评论 - #新人报道# vue3+element plus + windiCSS 页面渲染宽度与设计不符
使用npm create vue@latest创建vue3项目后,想要设置左右两个盒子各占视口宽度的一半,在HTML文件中测试没有问题,但是在vue组件中出现的效果总是右侧有一列空白区域,请问各位大佬是否有遇到过此类问题,还望不吝赐教
<template>
<div class="container">
<div class="container-left">1</div>
<div class="container-right">2</div>
</div>
</template>
<script setup lang='ts'>
</script>
<style>
/* 1. 重置全局样式(包括 html/body,需解除 scoped 限制) */
:global(*),
:global(html),
:global(body) {
margin: 0;
padding: 0;
/* 关键:让盒模型包含边框/内边距,避免宽度溢出 */
box-sizing: border-box;
}
/* 2. 修复容器宽度计算偏差 */
.container {
/* 替换 100vw 为 100%,避免滚动条占用视口宽度导致计算错误 */
width: 100%;
/* 强制占满屏幕高度 */
height: 100vh;
display: flex;
/* 禁止容器收缩,确保子元素占满 */
flex-shrink: 0;
}
.container-left {
/* 用 flex: 1 替代 50vw,自动平分宽度(更稳定) */
flex: 1;
height: 100%;
background-color: rgb(125, 248, 248);
}
.container-right {
/* 用 flex: 1 替代 50vw,自动平分宽度 */
flex: 1;
height: 100%;
background-color: rgb(248, 205, 125);
}
</style>0 赞 · 11 评论 - #新人报道# 5000矿石8 赞 · 21 评论