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