实现两边容器的高度等高主要是用 align-items: stretch 这个属性文章来源：https://www.toymoban.com/news/detail-813373.html
stretch 拉伸: 子元素没有高度或高度为auto，将占满整个容器的高度文章来源地址https://www.toymoban.com/news/detail-813373.html
<template>
<div>
<h3>我是测试页面</h3>
<div class="container">
<div class="left-column"></div>
<div class="right-colum">
<div class="box1" @click="addHeight">添加高度</div>
<div class="box2"></div>
</div>
</div>
</div>
</template>
<script setup lang="ts">
import { ref, computed } from "vue";
const height = ref(100);
const box1Height = computed(() => {
return height.value + "px";
})
// 增加高度
const addHeight = () => {
height.value += 50;
}
</script>
<style lang="scss" scoped>
.container {
display: flex;
align-items: stretch; // 拉伸: 子元素没有高度或高度为auto，将占满整个容器的高度
.left-column {
width: 400px;
margin-right: 12px;
background-color: cadetblue;
}
.right-colum {
width: 200px;
}
.box1 {
height: v-bind(box1Height);
margin-bottom: 12px;
background-color: palevioletred;
}
.box2 {
height: 100px;
background-color: peru;
}
}
</style>到了这里，关于display布局实现一侧的盒子高度与另一侧盒子的高度等高的文章就介绍完了。如果您还想了解更多内容，请在右上角搜索TOY模板网以前的文章或继续浏览下面的相关文章，希望大家以后多多支持TOY模板网！
