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

相关推荐
excel6 小时前
为什么在 Three.js 中平面能产生“起伏效果”?
前端
excel7 小时前
Node.js 断言与测试框架示例对比
前端
天蓝色的鱼鱼8 小时前
前端开发者的组件设计之痛:为什么我的组件总是难以维护?
前端·react.js
codingandsleeping8 小时前
使用orval自动拉取swagger文档并生成ts接口
前端·javascript
石金龙9 小时前
[译] Composition in CSS
前端·css
白水清风9 小时前
微前端学习记录(qiankun、wujie、micro-app)
前端·javascript·前端工程化
Ticnix10 小时前
函数封装实现Echarts多表渲染/叠加渲染
前端·echarts
用户221520442780010 小时前
new、原型和原型链浅析
前端·javascript
阿星做前端10 小时前
coze源码解读: space develop 页面
前端·javascript
叫我小窝吧10 小时前
Promise 的使用
前端·javascript