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

相关推荐
总有刁民想爱朕ha3 分钟前
车牌模拟生成器:Python3.8+Opencv代码实现与商业应用前景(C#、python 开发包SDK)
开发语言·python·数据挖掘
web前端1239 分钟前
Java客户端开发指南 - 与Web开发对比分析
前端
龙在天11 分钟前
前端 9大 设计模式
前端
搞个锤子哟11 分钟前
网站页面放大缩小带来的问题
前端
hj5914_前端新手11 分钟前
React 基础 - useState、useContext/createContext
前端·react.js
半花14 分钟前
【Vue】defineProps、defineEmits 和 defineExpose
前端·vue.js
霍格沃兹_测试20 分钟前
软件测试 | 测试开发 | H5页面多端兼容测试与监控
前端
toooooop829 分钟前
本地开发环境webScoket调试,保存html即用
前端·css·websocket
山有木兮木有枝_35 分钟前
手动封装移动端下拉刷新组件的设计与实现
前端
阳光阴郁大boy37 分钟前
大学信息查询平台:一个现代化的React教育项目
前端·react.js·前端框架