前言
很久没写过这种等高布局实现了，来重温一下经典。
两栏布局，高度相等，高度由最高的内容撑开，左右两边高度不固定。
固定html
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Document</title>
</head>
<body>
<div class="box">
<div class="high">
<textarea name="" id="" cols="30" rows="10"></textarea>
</div>
<div class="low">
<textarea name="" id="" cols="30" rows="10"></textarea>
</div>
</div>
</body>
</html>
- 实现思路：外层容器使用flex布局，内部子元素不写高度，但是都加上
overflow:hidden;便可以实现。
<style>
.box {
display: flex;
}
.high {
width: 300px;
background: red;
overflow: hidden;
}
.low {
flex: 1;
overflow: hidden;
background: blue;
}
</style>
- 还有一种利用父级元素
display: table，子元素display: table-cell也可以实现类似效果。
.box {
display: table;
}
.high,
.low {
display: table-cell;
}
.high {
background: red;
}
.low {
background: blue;
}
- 使用
grid布局来实现
.box {
display: grid;
grid-template-columns: 1fr 1fr;
}
.high {
background: red;
}
.low {
background: blue;
}
效果图(通过拉伸textarea的高度来改变容易高度)
