Html 绝对定位可滚动div中的页脚

我似乎无法使页脚粘到可滚动div的底部。 当div有几个字符或多个字符且溢出时，页脚应粘到底部。还要注意，这不是在主体上，而是在任意div上

  <div class="blue">
        <div class="red">
          Nam liber tempor cum soluta nobis eleifend option congue nihil imperdiet doming id quod mazim placerat facer possim assum. Lorem ipsum dolor sit amet, consectetuer adipiscing elit, sed diam nonummy nibh euismod tincidunt ut laoreet Nam liber tempor cum
          soluta nobis eleifend option congue nihil imperdiet doming id quod mazim placerat facer possim Nam liber tempor cum soluta nobis eleifend option congue nihil imperdiet doming id quod mazim placerat facer possim soluta nobis eleifend option congue
          nihil imperdiet doming id quod mazim placerat facer possim Nam liber tempor cum soluta nobis eleifend option congue nihil imperdiet doming id quod mazim placerat facer possim soluta nobis eleifend option congue nihil imperdiet doming id quod mazim
          placerat facer possim Nam liber tempor cum soluta nobis eleifend option congue nihil imperdiet doming id quod mazim placerat facer possim
        </div>

      <div class="lime">footer</div>
</div>

<style>
    * {
      box-sizing: border-box;
    }

    html {
      height: 90%
    }

    body {
      height: 100%;
    }

    .blue {
      position: relative;
      border: solid 5px blue;
      height: 100%;
      overflow-y: auto;
    }

    .red {
      width: 200px;
      border: solid 5px red;
      margin-bottom: 100px;
    }

    .lime {
      position: absolute;
      bottom: 0px;
      width: 250px;
      height: 100px;
      border: solid 5px lime;
    }
</style>

不受时间和解决方案的限制，不受限制，不受限制，不受限制。他是一位杰出的政治家，他是一位伟大的政治家，他是一位伟大的政治家
解决方案nobis eleifend option congue nihil Impred doming id quod mazim placerat facer possim Nam liber临时和解决方案nobis eleifend option congue nihil Impred doming id quod mazim placerat facer possim nobis eleifend option congue nihil mazim placerat possim nobis eleifend option congue
无需为无需为无需为无需为无需为无需为无需为无需为无需为无需为无需为无需为无需为无需为无需为无需为无需为无需为无需为无需为无需为无需为无需为无需为无需为无需为无需为无需为
placerat facer possim Nam liber Temporal um Solutiona nobis eleifend option congue nihil imperdiet doming id quod mazim placerat facer possim
页脚
* {
框大小：边框框；
}
html{
身高：90%
}
身体{
身高：100%；
}
蓝先生{
位置：相对位置；
边框：实心5px蓝色；
身高：100%；
溢出y：自动；
}
瑞德先生{
宽度：200px；
边框：实心5px红色；
边缘底部：100px；
}
莱姆先生{
位置：绝对位置；
底部：0px；
宽度：250px；
高度：100px；
边框：固体5px石灰；
}

这是我的小提琴：

更新：

---

请注意内容长度和滚动条位置

您可以使石灰相对，只需给出与其高度相等的负边距：

.lime {
  position: relative;
  margin-top: -100px;
  width: 250px;
  height: 100px;
  border: solid 5px lime;
}

同时删除红色的边距：

.red {
  width: 200px;
  border: solid 5px red;
}

您可以使用“wrapper”元素将

.red

包装在其中。对于

.wrapper

您设置了100%的高度，并且

溢出-y

和

.lame

将在

.wrapper

之后进入

.wrapper {
    height: 100%;
    overflow-y: auto;
}

---

您似乎在寻找

最小高度

、

最大高度

和

调整内容

的特定组合：

*{
框大小：边框框；
}
身体{
保证金：0；
}
蓝先生{
边框：实心5px蓝色；
最大高度：90vh；
最小高度：90vh；
溢出y：自动；
显示器：flex；
弯曲方向：立柱；
证明内容：之间的空间；
}
瑞德先生{
宽度：300px；
边框：实心5px红色；
}
莱姆先生{
高度：100px；
边框：固体5px石灰；
宽度：300px；
弹性收缩：0；
}

不受时间和解决方案的限制，不受限制，不受限制，不受限制。他是一位杰出的政治家，他是一位伟大的政治家，他是一位伟大的政治家
解决方案nobis eleifend option congue nihil Impred doming id quod mazim placerat facer possim Nam liber临时和解决方案nobis eleifend option congue nihil Impred doming id quod mazim placerat facer possim nobis eleifend option congue nihil mazim placerat possim nobis eleifend option congue
无需为无需为无需为无需为无需为无需为无需为无需为无需为无需为无需为无需为无需为无需为无需为无需为无需为无需为无需为无需为无需为无需为无需为无需为无需为无需为无需为无需为
placerat facer possim Nam liber Temporal um Solutiona nobis eleifend option congue nihil imperdiet doming id quod mazim placerat facer possim
页脚

我需要一点澄清：“页脚应该贴到底”什么的底部？蓝底、红底还是屏幕底部？“当div有几个字符或多个字符并溢出时。”当哪个div有几个字符或多个字符时？我添加了一个带有要求的图像。谢谢，但这对我不起作用。我添加了一个带有要求的图像。谢谢，但这对我来说不起作用。我添加了一个带有要求的图像。谢谢，但这对我来说不起作用。我添加了一个带有需求的图像。