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>

这是我的小提琴：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>

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

Answer 2

你可以使你的石灰相对，并且只给出与其高度相等的负余量：

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

还从红色中删除保证金：

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

Answer 3

您可以使用＆＃34;包装＆＃34;将.red包裹在其中的元素。对于.wrapper，您设置了100％的身高，overflow-y和.lime将在＆＃34;之后.wrapper。

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

jsFiddle

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

3 个答案: