flex布局实现内容区域高度自适应

如果可以实现记得点赞分享，谢谢老铁～

一、背景说明

对于纵向排列布局，且上中下个个模块都是自动高度。当我们针对中间部分需要自适应高度且进行滚动时，那我们就可以用flex: 1 来处理。

二、先看效果图

请添加图片描述

二、flex布局

<!DOCTYPE html>
<html lang="en">
<head><meta charset="UTF-8"><meta http-equiv="X-UA-Compatible" content="IE=edge"><meta name="viewport" content="width=device-width, initial-scale=1.0"><title>flex布局实现 内容区域高度自适应</title><style>* {padding: 0;margin: 0;}.directoryCon {height: 100vh;width: 100%;background-color: aqua;display: flex;flex-direction: column;justify-content: space-between;}.directoryCon .headerTitle {height: 100px;background-color: blue;display: flex;justify-content: center;align-items: center;}.directoryCon .main {flex: 1;background-color: rgb(0, 174, 255);overflow: hidden;display: flex;}.directoryCon .main .menu{display: flex;flex-direction: column;}.directoryCon .main .menu .logo{height: 100px;width: 100%;background-color: blueviolet;display: flex;align-items: center;justify-content: center;}.directoryCon .main .menu .list{flex: 1;overflow-y: scroll;background-color: rgb(255, 166, 0);}.directoryCon .main .menu ul>li{height: 200px;width: 250px;display: flex;justify-content: center;align-items: center;border-bottom: 1px solid #000;}.directoryCon .footer {height: 100px;background-color: rgb(137, 206, 97);display: flex;justify-content: center;align-items: center;}</style>
</head>
<body><div class="directoryCon"><div class="headerTitle"><h1>头部</h1></div><div class="main"><div class="menu"><div class="logo"><h1>FLEX布局</h1></div><ul  class="list"><li>我是菜单</li><li>我是菜单</li><li>我是菜单</li><li>我是菜单</li><li>我是菜单</li><li>我是菜单</li><li>我是菜单</li><li>我是菜单</li><li>我是菜单</li><li>我是菜单</li><li>我是菜单</li><li>我是菜单</li><li>我是菜单</li><li>我是菜单</li><li>我是菜单</li><li>我是菜单</li><li>我是菜单</li><li>我是菜单</li><li>我是菜单</li><li>我是菜单</li></ul></div></div><div class="footer"><h1>底部</h1></div></div>
</body>
</html>