本文旨在解决经典布局计划中，左侧菜单栏膨胀，主页面无奈追随变动，右侧内容界面须要设置高度能力滚动问题
如下图： 若要实现下图所示，咱们都会应用 “定位” 形式实现。当顶部高度变动，就须要咱们调整内容高度。左侧栏变动就须要调整右侧宽度等。
现在: 咱们能够应用flex办法实现这种布局计划，且无需应用定位形式，所有布局都是一边调整，另一边跟着一起变动，无需通过任何js实现, 更不须要设置高度。话不多说间接上代码：
以下代码间接新建一个html文件，粘贴进去就能够看到实际效果。
<!DOCTYPE html>
<html lang="zh">
<head>
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width,initial-scale=1.0,maximum-scale=1,user-scalable=no">
<meta charset="UTF-8">
<title>经典布局</title>
</head>
<!--
本文重点：
flex-shrink为0示意不会被压缩，配合上height为0，flex为1一起就示意永远会占满剩下的区域，不会超出也不会被压缩
-->
<style>
body,
html {
margin: 0;
box-sizing: border-box;
}
.container {
height: 100vh;
width: 100vw;
display: flex;
/* 垂直布局 */
flex-direction: column;
}
.header {
height: 50px;
width: 100%;
background: #929292;
}
.context {
flex: 1;
/* 第一种： 设置flex-shrink为0，设置height为0 */
/* 第二种： 设置overflow: scroll */
flex-shrink: 0;
height: 0;
/*overflow: scroll;*/
width: 100%;
display: flex;
}
.aside {
height: 100%;
width: 200px;
overflow: auto;
}
.menu {
height: 100px;
background: #ccc;
border: 5px solid #ddd;
}
.main {
flex: 1;
/* 形式一 设置flex-shrink为0，设置width为0 */
/* 形式二 设置overflow: scroll */
flex-shrink: 0;
width: 0;
/*overflow: scroll;*/
display: flex;
flex-direction: column;
}
.breadcrumb {
height: 50px;
padding: 10px 50px;
}
.myapp {
flex: 1;
overflow: auto;
}
.page {
width: 2000px;
height: 2000px;
padding: 10px;
border: 5px dashed gray;
}
</style>
<body>
<div class="container">
<div class="header">顶部菜单</div>
<div class="context">
<div class="aside">
<div class="menu">菜单1</div>
<div class="menu">菜单2</div>
<div class="menu">菜单3</div>
<div class="menu">菜单4</div>
<div class="menu">菜单5</div>
<div class="menu">菜单6</div>
</div>
<div class="main">
<div class="breadcrumb">面包屑/标题栏</div>
<div class="myapp">
<div class="page">可随便拖动的内容区域</div>
</div>
</div>
</div>
</div>
</body>
</html>下面的布局计划次要是要了解flex-shrink为0示意不会被压缩，配合上height为0，flex为1一起就示意永远会占满剩下的区域，不会超出也不会被压缩。这样不必应用定位形式能够轻松实现这种布局，当然也能够用在挪动端，例如当初的饿了么，美团外卖等这种类型的布局，间接能够通过下面代码实现。
发表回复