在可滚动 div 中绝对定位页脚

Question

我似乎无法将页脚固定在可滚动的底部 div。当 div 字符少或字符多溢出时，页脚应贴在底部。另请注意，这不在 body 上，而是任意 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>

这是我的fiddle：https://jsfiddle.net/CaptM44/yk99pgzz/

更新： this image shows the requirements

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

Answer 1

你可以让你的 lime 相对，并且只给出等于它的高度的负边距：

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

同时删除红色的边距：

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

Answer 2

您可以使用 "wrapper" 元素将 .red 包裹在其中。对于 .wrapper，您设置 100% 高度，overflow-y 和 .lime 将变为 "after" .wrapper.

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

jsFiddle

Answer 3

您似乎在寻找 min-height、max-height 和 justify-content 的特定组合：

* {
  box-sizing: border-box;
}
body {
  margin: 0;
}

.blue {
  border: solid 5px blue;
  max-height: 90vh;
  min-height: 90vh;
  overflow-y: auto;
  display: flex;
  flex-direction: column;
  justify-content: space-between;
}

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

.lime {
  height: 100px;
  border: solid 5px lime;
  width: 300px;
  flex-shrink: 0;
}

<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>

请注意，您需要在 .blue 上同时设置 min-height 和 max-height 才能正常工作。将 90vh 替换为您想要的容器高度。

在可滚动 div 中绝对定位页脚

Absolutely positioning footer in scrollable div

html

css

scroll

sticky

footer