CSS让子元素div的高度填满父容器的剩余空间

快来打我* 2023-01-19 07:23 36阅读 0赞

在写项目中很多时候都会遇到这种情况，**在父级中分为上下两个部分，其中头部的header是固定的，那main就要把剩下的区域自适应填充**(即减去头部header的高度自适应)  
![在这里插入图片描述][watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L0NTRE56aGFvamlhbGU_size_16_color_FFFFFF_t_70]  
对很多人都想到了直接给main设置height为100%不就行了，但是这种方式会让浏览器的滚动条出现，也就是**你的高度没有减去顶部header的高度**，这种写法是很不友好的

试了很多次最终用的是：**让头部的header浮动并且让他的width为100%，main的高度还设为100%这样**。

不说了直接上代码：

<template>
      <div class="home">
        <el-container>
          <el-header>Header</el-header>
          <el-main>
           main
          </el-main>
        </el-container>
      </div>
    </template>
    
    <script>
    export default {
        
      name: 'Layout'
    }
    </script>
    
    <style scoped>
    .home{
        
      width: 100%;
      height: 100%;
    }
    .el-header{
        
      background-color: #B3C0D1;
      color: #333;
      text-align: center;
      line-height: 60px;
      width: 100%;
      float: left;
    }
    .el-main {
        
      background-color: #E9EEF3;
      color: #333;
      text-align: center;
      height:100%;
    }
    
    .el-container {
        
      /*margin-bottom: 40px;*/
      width: 100%;
      height: 100%;
    }
    
    </style>

[watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L0NTRE56aGFvamlhbGU_size_16_color_FFFFFF_t_70]: /images/20221021/88d04d2a4a5f4106956760cd6ecf3870.png