css 左右高度相同 |css样式模板后台管理

方法1：
.left {
float: left;
width: 50%;
height: 100%;
background: #f2f2f2; 
}
.right {
overflow: hidden;
height: 100%;
background: #ccc;
}

这个方法使用了浮动和清除浮动的技巧，将左侧列设置为浮动，宽度为50%，高度为100%，右侧列则通过设置overflow: hidden;可达到自适应高度的效果。

方法2：
.wrapper {
display: table;
width: 100%;
}
.left, .right {
display: table-cell;
vertical-align: top;
padding: 10px;
}

这个方法使用了CSS表格布局的技巧，将包含左右两列的容器设置为display: table;，将左右两列的显示方式设置为display: table-cell;，通过设置垂直对齐为顶部可达到高度相同的效果。

方法3：
.wrapper {
display: flex;
flex-wrap: wrap;
}
.left, .right {
width: 50%;
box-sizing: border-box;
padding: 10px;
}

这个方法使用了CSS3的flex布局，将容器设置为display: flex;，通过设置左右两列的宽度为50%可达到等分布局的效果，同时通过设置box-sizing: border-box;，可以使左右两列的内边距和边框不会撑开容器。

以上三种方法都可以实现左右两列高度相同的效果，根据实际情况选择适合自己的方法即可。