前端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%的比例。

相关推荐
i18nsite5 分钟前
互联网重构日记:1 - 开篇
前端·后端
洋不写bug6 分钟前
html表格,无序,有序,自定义,无语义,表单标签,特殊字符详解
前端·html
JarvanMo17 分钟前
Flutter. 适用于 GetX 5 的 CLI (命令行接口/工具)
前端
赶飞机偏偏下雨20 分钟前
【Java笔记】消息队列
java·开发语言·笔记
dyxal20 分钟前
VS Code 1.52.1 对应一些插件版本
前端·chrome
00后程序员张22 分钟前
C++ string 类使用攻略
开发语言·c++
融化的雪32 分钟前
reactflow整理节点,尾节点位置的大坑
开发语言·前端·javascript
豐儀麟阁贵40 分钟前
2.6 代码注释与编码规
java·开发语言
egoist202344 分钟前
[linux仓库]信号保存[进程信号·肆]
linux·开发语言·信号集·信号保存·sigpending
Gazer_S44 分钟前
【理解React Hooks与JavaScript类型系统】
前端·javascript·react.js