如何使中间div自动填充上下两个div间的剩余空间？

要实现#top和#bottom高度自适应、#middle填充两者间全部空间且不改变#middle-inner尺寸的布局，推荐使用Flex垂直布局，纯CSS就能搞定，比绝对定位方案更稳定：

修改步骤： #

1. 给html和body设置全屏高度，清除默认边距，避免布局偏移：

   html, body {
       height: 100%;
       margin: 0;
   }
   

2. 将body设为垂直方向的Flex容器，让子元素按垂直方向排列：

   body {
       display: flex;
       flex-direction: column;
   }
   

3. 让#top和#bottom保持内容自适应高度，不被压缩：

   #top, #bottom {
       flex-shrink: 0;
   }
   

4. 设置#middle自动填充#top和#bottom之间的剩余空间：

   #middle {
       flex: 1;
       /* 可选：如果中间内容超出高度需要滚动，可添加 overflow: auto */
       /* overflow: auto; */
   }
   

5. 移除#bottom的绝对定位，Flex布局会自动让它贴在页面底部，同时保留内容自适应高度的特性。

完整代码： #

<html>
<head>
<style>
html, body {
    height: 100%;
    margin: 0;
}
body {
    display: flex;
    flex-direction: column;
}
#top {
    background-color: purple;
}
#middle {
    background-color: green;
    flex: 1;
}
#middle-inner {
    width: 100px;
    height: 200px;
    background-color: red;
}
#bottom {
    background-color: blue;
    flex-shrink: 0;
}
</style>
</head>
<body>
    <div id='top'>
    top（内容高度自适应）
    </div>
    <div id='middle'>
        middle（自动填充剩余空间）
        <div id='middle-inner'>
            middle inner（尺寸保持不变）
        </div>
    </div>
    <div id='bottom'>
    bottom（内容高度自适应）
    </div>
</body>
</html>

补充说明： #

如果必须保留#bottom的绝对定位，需要通过JavaScript动态计算#bottom的高度，再给#middle设置对应的padding-bottom，但这种方式需要监听窗口大小变化，维护成本更高，优先推荐上面的Flex布局方案。

内容的提问来源于stack exchange，提问作者tom894