css解决高度自适应问题(使用flex)

这篇文章通过flex来解决高度自适应问题,纯用css,还是昨天这个例子
css解决高度自适应问题(使用flex)
需求和上篇文章一样,这里再重复一遍

需求:

  1. 这个矩形的高度和浏览器窗口的高度相同,不能出现纵向滚动条;
  2. 绿色部分高度固定,比如50px;
  3. 紫色部分填充剩余的高度;

html结构如下:

<div id="root">
  <header>
   test
  </header>
  <main>
     content
  </main>
</div>

首先要定义一个弹性容器,然后根据需求我们得知弹性盒子中内容是纵向排列,高度占满全屏,这里我们height用100vh,(注意:height:100%等同于height:100vh,但是前者div不会撑开)

接下来直接上css代码

 body {
      margin: 0;
      padding: 0;
    }
    #root {
      display: flex;
      flex-direction: column;
      height: 100vh;
    }

    header {
      height: 50px;
      flex: 0 0 auto;
      background: orange;
    }

    main {
      flex-grow: 1;
      background-color: blueviolet;
    }

ok了,写这篇文章,是因为之前项目中遇到一个这么要死的布局,被需求三弄的头痛,后面在一个大佬的指点下选择了flex,所以作为一个小小的编程技巧留用。

另外补充一下flex的桃园三兄弟之flex-grow、flex-shrink、flex-basis详解(这是别人博客里面看到,个人觉得蛮好理解弄过来的,这里只给定义解释,具体实例,还请参考:https://blog.csdn.net/m0_37058714/article/details/80765562)

flex-grow、flex-shrink、flex-basis三个属性的作用:

在flex布局中,父元素在不同宽度下,子元素是如何分配父元素空间的。

(注意:这三个属性都是在子元素上设置的,下面小编要讲的是父元素,指以flex布局的元素(display:flex))

小编这里先教一下大家如何快速记住这三个属性:

  1. flex-basis (首先是 flex-basis ,basis英文意思是<主要成分>,所以他和width放在一起时,肯定把width干掉,basis遇到width时就会说我才是最主要的成分,你是次要成分,所以见到我的时候你要靠边站。)
  2. flex-grow(其次是 flex-grow,grow英文意思是<扩大,扩展,增加>,这就代表当父元素的宽度大于子元素宽度之和时,并且父元素有剩余,这时,flex-grow就会说我要成长,我要长大,怎么样才能成长呢,当然是分享父元素的空间了。见下面第二个属性的内容
  3. flex-shrink(最后是 flex-shrink, shrink英文意思是<收缩,>,这就代表当父元素的宽度小于子元素宽度之和时,并且超出了父元素的宽度,这时,flex-shrink就会说外面的世界太苦了,我还是回到父亲的怀抱中去吧!因此,flex-shrink就会按照一定的比例进行收缩。)