css 左右两栏高度

在CSS中，经常会遇到左右两栏不等高的情况，对于这种情况，我们可以采用多种方法来实现，下面我们来看看其中的几种解决方法。

1. 使用背景色撑开高度

.left {
    float: left;
    width: 70%;
    height: 100%;
    background-color: #fff;
    position: relative;
    overflow: hidden;
}
.right {
    float: left;
    width: 30%;
    height: 100%;
    background-color: #f1f3f6;
    position: relative;
    overflow: hidden;
}

利用背景色将左侧的高度撑开，从而达到与右侧相同的高度。

2. 使用伪元素撑开高度

.container {
    position: relative;
}
.left {
    float: left;
    width: 70%;
}
.right {
    float: left;
    width: 30%;
    position: absolute;
    top: 0;
    right: 0;
    bottom: 0;
}
.right:before {
    content: "";
    height: 100%;
    display: inline-block;
    vertical-align: middle;
    margin-right: -0.25em;
}
.right span {
    display: inline-block;
    vertical-align: middle;
}

利用右侧元素的定位和伪元素的方式撑开右侧高度，利用垂直居中的方式使右侧内容与左侧垂直对齐。

3. 利用flexbox布局实现

.container {
    display: flex;
}
.left {
    flex: 7;
}
.right {
    flex: 3;
}
    

利用flexbox布局的特性，自动将左右两侧的高度设置为相等，同时具备灵活性。

声明：本文内容由网友自发贡献，本站不承担相应法律责任。对本内容有异议或投诉，请联系2913721942#qq.com核实处理，我们将尽快回复您，谢谢合作！