それが達成できたら、「いいね！」とシェアを忘れずに、ありがとうございます~
1. 背景説明
垂直配置レイアウトの場合、上部、中間、下部のモジュールの高さは自動的に調整されます。中央部分に適応的な高さとスクロールが必要な場合は、 flex: 1 を使用して処理できます。
2. まずはレンダリングを見てみましょう
2. フレックスレイアウト
<!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>
2. 分析
Flexbox レイアウトでは、コンテナーの表示プロパティを flex に設定することで、適応的な高さを実現できます。
コンテナの表示プロパティを flex に設定すると、コンテナ内のすべての子要素が Flexbox コンテナの項目になります。
flex-direction プロパティを設定することで、Flexbox コンテナ内の子要素の配置方向を決定できます。デフォルトでは、子要素の配置方向は flex-direction: row であり、行方向に配置されます。
高さの適応型を実装する場合、コンテナの表示属性を flex に設定し、flex-direction 属性を列に設定する必要があります。これにより、従来のレイアウトにおけるコンテンツの高さの適応型の問題を簡単に解決できます。
同時に、コンテナの高さ属性を height: 100vh に設定し、コンテナの固定高さを定義します。そして、すべての子要素の flex プロパティを 1 に設定することで、コンテナの残りのスペースを均等に分割します。