javascript - 文本在 div 之外流动，溢出 + 定位 div 在父 div 的底部(有溢出)

Question

我的代码有问题。

我的目标是拥有一个可滚动的 div，其中包含另外两个 div。

一个div有文字， 另一个有约会。

我面临两个问题:

1. 文本的内容像这样从框的顶部溢出。

1. 日期没有粘在父 div 的底部。

我的 CSS 如下:

#taskContainer>div {
position: relative;
width: 175px;
height: 240px;
display: inline-block;
background-image: url('/assets/notebg.png');
margin: 15px;
animation: Fadein 2s;
overflow: auto;}

.taskDateAndTime {
position: absolute;
left: 0;
bottom: 0;
padding-left: 4px;}

.taskInfo {
padding-top: 15px;
word-break: break-all;
padding-bottom: 15px;}

HTML 部分(写在 JS 函数和 HTML 页面中):

JS:

        let div = `
    <div id="task${index}">
        <div class='taskInfo'>${taskInfo.task}</div>
        <br>
        <div class='innerDateTime'>
            <div class='taskDateAndTime'>${taskInfo.date}<br>${taskInfo.time}</div>
        </div>
    </div>`;
    taskContainer.innerHTML += div;

HTML:

<div id="taskContainer"></div>

真的可以在溢出和定位方面使用一些帮助。

提前致谢。

Answer 1

对于可以依赖sticky的位置，对于overflow，需要调整高度以匹配使用图片的大小background-size:100% 100%

这是粘性行为的一个工作示例

.box {
  display:inline-flex;
  flex-direction:column;
  width:150px;
  height:200px;
  border:1px solid;
  overflow:auto;
}
.box div:last-child {
  margin-top:auto;
  position:sticky;
  bottom:0;
  background:#fff;
  padding:2px;
}

<div class="box">
<div>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Etiam feugiat et metus auctor imperdiet. Nam ac mattis elit, at imperdiet mi. Nam gravida ullamcorper blandit. </div>
<div>10/12/2020</div>
</div>

<div class="box">
<div>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Etiam feugiat et metus auctor imperdiet. Nam ac mattis elit, at imperdiet mi. Nam gravida ullamcorper blandit. at imperdiet mi. Nam gravida ullamcorper blandit. at imperdiet mi. Nam gravida ullamcorper blandit. </div>
<div>10/12/2020</div>
</div>

<div class="box">
<div>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Etiam feugiat et metus auctor imperdiet. Nam ac mattis elit, at imperdiet mi. Nam gravida ullamcorper blandit. at imperdiet mi. Nam gravida ullamcorper blandit. at imperdiet mi. Nam gravida ullamcorper blandit. Nam gravida ullamcorper blandit. at imperdiet mi. Nam gravida ullamcorper blandit.</div>
<div>10/12/2020</div>
</div>