【CSS相关】个高度自适应的div，里面有两个div，一个高度100px，希望另一个填满剩下的高度（约226字）

一个高度自适应的div，里面有两个div，一个高度100px，希望另一个填满剩下的高度

• 方案1：
  • .sub { height: calc(100%-100px); }
• 方案2：
  • .container { position:relative; }
  • .sub { position: absolute; top: 100px; bottom: 0; }
• 方案3：
  • .container { display:flex; flex-direction:column; }
  • .sub { flex:1; }

这三种方案都可以实现一个高度自适应的 div，其中一个子 div 高度为 100px，另一个子 div 填满剩下的高度。

• 方案1使用了 calc() 函数来计算剩余高度，.sub 的高度设置为 calc(100% - 100px)，即剩余高度。
• 方案2使用了相对定位和绝对定位，父容器 .container 设置为相对定位，子 div .sub 设置为绝对定位，设置 top: 100px 让其距离顶部 100px，设置 bottom: 0 让其底部与父容器底部对齐。
• 方案3使用了弹性布局（Flexbox），父容器 .container 设置为 display: flex，并指定 flex-direction: column 使其垂直排列。子 div .sub 使用 flex: 1 来填充剩余的空间，自动调整高度。

这些方案都可以实现相应的效果，具体选择哪种方案取决于实际需求和布局结构。