css 左右两边高度相等

CSS中如何让页面左右两边的高度相等呢？

/* html结构 */div class="wrapper">
      div class="left">
    /div>
      div class="right">
    /div>
    /div>
/* 样式 */.wrapper {
      display: flex;
}
.left, .right {
      width: 50%;
      box-sizing: border-box;
}
/* 右边高度超过左边 */.right {
      height: 500px;
      background-color: #eee;
}
/* 左边高度等于右边 */.left {
      background-color: #ccc;
      /* 在左边添加一个看不见的占位符 */  padding-bottom: 9999px;
      margin-bottom: -9999px;
}
    

以上代码中，我们使用了HTML的flex布局。同时，我们设置了左右两个容器都为50%宽度，并且给右边容器设置了一个高度值。此时，左右容器高度不相等。

为了让左边容器的高度等于右边容器的高度，在左边容器中添加一个看不见的占位符，并设置它的padding-bottom值为很大的数。然后通过负的margin-bottom值将它的高度抵消掉，从而等到左右容器高度相等的效果。

这样，通过CSS样式我们就可以实现页面左右两边高度相等的效果。

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