[分享]css两行高度自适应

CSS是前端开发中的重要一环，用于控制网页元素的样式、排版等效果。其中，两行高度自适应也是前端开发中常见的问题之一。下面我们一起来看看如何解决这个问题。 .container { height: au...

CSS是前端开发中的重要一环，用于控制网页元素的样式、排版等效果。其中，两行高度自适应也是前端开发中常见的问题之一。下面我们一起来看看如何解决这个问题。

 .container {
      height: auto;
      display: flex;
      flex-direction: column;
      justify-content: center;
    }

    .top {
      height: 50%;
      background-color: lightblue;
    }

    .bottom {
      height: 50%;
      background-color: lightgreen;
    } 

在这段代码中，我们使用了flex布局的方法，将父元素设置为display: flex，使其可以控制子元素的排布和大小。同时，通过设置height为auto，我们让子元素自适应父元素的高度。

在具体实现上，我们将容器元素.container的flex-direction属性设置为column，表示子元素将按照竖直方向排列。然后，我们将子元素.top和.bottom的高度都设为50%，这样就可以使它们平分父元素.container的高度。最后，通过分别设置它们的背景色，我们可以很容易地看到整体效果。

综上所述，使用flex布局是解决两行高度自适应的问题的一种有效方法，可以帮助我们打造美观而又实用的网页。