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

Posted 2023-03-21

【中文标题】在可滚动的 div 中绝对定位页脚

【英文标题】：Absolutely positioning footer in scrollable div

【发布时间】：2017-12-14 18:04:25

【问题描述】：

我似乎无法将页脚粘贴到可滚动 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>

这是我的小提琴：https://jsfiddle.net/CaptM44/yk99pgzz/

更新： this image shows the requirements

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

【问题讨论】：

我需要澄清一点：“页脚应该贴在底部”底部是什么？蓝色 div、红色 div 还是屏幕底部？ “当 div 字符少或字符多并溢出时。”什么时候哪个 div 有几个字符或多个字符？

我添加了一张符合要求的图片。

【参考方案1】：

你可以让你的石灰相对，只给负边距，等于它的高度：

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

同时从红色中删除边距：

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

【讨论】：

谢谢，但这对我不起作用。我添加了一张符合要求的图片。

【参考方案2】：

您可以使用“包装器”元素将.red 包装在其中。对于.wrapper，您设置了 100% 高度，overflow-y 和 .lime 将在“之后”.wrapper。

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

jsFiddle

【讨论】：

谢谢，但这对我不起作用。我添加了一张符合要求的图片。

【参考方案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 替换为您想要的容器高度。

【讨论】：

谢谢，但这对我不起作用。我添加了一张符合要求的图片。