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

Question

我似乎无法让页脚贴在可滚动 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>

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

更新: this image shows the requirements

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

Answer 1

您似乎在寻找 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 替换为您想要的容器高度。