使用flex布局解决经典布局中overflow必须设置高度才能滚动问题

smallStone

本文旨在解决经典布局方案中,左侧菜单栏收缩,主页面无法跟随变化,右侧内容界面需要设置高度才能滚动问题

如下图: 若要实现下图所示,我们都会使用 “定位” 方式实现。当顶部高度变化,就需要我们调整内容高度。左侧栏变化就需要调整右侧宽度等。

image.png

如今: 我们可以使用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一起就表示永远会占满剩下的区域,不会超出也不会被压缩。这样不用使用定位方式可以轻松实现这种布局,当然也可以用在移动端,例如现在的饿了么,美团外卖等这种类型的布局,直接可以通过上面代码实现。

阅读 1.8k

smallhuifei的技术博客
每天积累一点,多了就发现简单了!

前端一枚^_-

164 声望
27 粉丝
0 条评论

前端一枚^_-

164 声望
27 粉丝
文章目录
宣传栏