前端vue3中父div width: 40%; height: 62%; 子div如何设置相对父位置不变

在Vue 3中,若要设置子DIV以保持相对于父DIV的宽度和高度,可以使用CSS的百分比(%)来设置子DIV的宽度和高度。这样,子DIV的尺寸将相对于其父DIV尺寸进行设置。

以下是一个简单的例子:

复制代码
<template>
  <div class="parent">
    <div class="child">
      子DIV内容
    </div>
  </div>
</template>
 
<script>
export default {
  // Vue 组件的其余部分
};
</script>
 
<style>
.parent {
  width: 40%;
  height: 62%;
  position: relative; /* 确保子DIV相对定位 */
}
 
.child {
  width: 100%; /* 子DIV宽度为父DIV的100% */
  height: 100%; /* 子DIV高度为父DIV的100% */
  position: absolute; /* 子DIV绝对定位 */
  top: 0;
  left: 0;
}
</style>

在这个例子中,父DIV设置了width: 40%;height: 62%;。子DIV通过设置position: absolute;top: 0;以及left: 0;,使其位置相对于父DIV的左上角。通过设置width: 100%;height: 100%;,子DIV的尺寸将会设置为父DIV的100%,即保持父DIV的40%和62%的比例。

相关推荐
用户21496515898758 分钟前
从零搭建uniapp环境-记录
前端
liulilittle11 分钟前
LwIP协议栈MPA多进程架构
服务器·开发语言·网络·c++·架构·lwip·通信
水淹萌龙25 分钟前
玩转 Go 表达式引擎:expr 实战指南
开发语言·后端·golang
艾莉丝努力练剑31 分钟前
【C++:继承】面向对象编程精要:C++继承机制深度解析与最佳实践
开发语言·c++·人工智能·继承·c++进阶
penguin_bark32 分钟前
C++ 异步编程(future、promise、packaged_task、async)
java·开发语言·c++
小龙报34 分钟前
《数组和函数的实践游戏---扫雷游戏(基础版附源码)》
c语言·开发语言·windows·游戏·创业创新·学习方法·visual studio
又是忙碌的一天1 小时前
Java基础 与运算
java·开发语言
liu****1 小时前
笔试强训(八)
开发语言·算法·1024程序员节
m0_748241231 小时前
Java注解与反射实现日志与校验
java·开发语言·python
nianniannnn1 小时前
Qt布局管理停靠窗口QDockWidget类
开发语言·数据库·c++·qt·qt5·qt6.3