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

108次阅读

共计 1804 个字符，预计需要花费 5 分钟才能阅读完成。

如下图：若要实现下图所示，咱们都会应用“定位”形式实现。当顶部高度变动，就须要咱们调整内容高度。左侧栏变动就须要调整右侧宽度等。

现在: 咱们能够应用 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 一起就示意永远会占满剩下的区域，不会超出也不会被压缩。这样不必应用定位形式能够轻松实现这种布局，当然也能够用在挪动端，例如当初的饿了么，美团外卖等这种类型的布局，间接能够通过下面代码实现。

正文完