[分享]css两边高度到页面底部

在页面布局中，经常会遇到左右两边的高度不一样的情况。解决这个问题的一种方法是使用CSS让两边的高度都到达页面底部。 .container { display: flex; minheight: 100...

在页面布局中，经常会遇到左右两边的高度不一样的情况。解决这个问题的一种方法是使用CSS让两边的高度都到达页面底部。

 .container {
    display: flex;
    min-height: 100vh;
  }

  .left {
    flex: 1;
    margin-right: 20px;
  }

  .right {
    flex: 1;
    margin-left: 20px;
  } 

以上代码基于Flexbox布局，并使用了min-height属性来确保容器至少占据整个视口的高度。.left和.right两个元素使用了相同的flex属性，使它们在宽度方面平分容器的宽度，同时使用margin将它们分开。

这样做确保了无论哪一边的内容长度有多长，两边的高度都将自动调整以填满整个视口。