英文:
Text is flowing outside of div with overflow + positioning div at the bottom of parent div (with overflow)
问题
我遇到了代码问题。
我的目标是创建一个可滚动的 div，其中包含两个其他的 div。
一个 div 包含文本，
另一个包含日期。
我面临两个问题：
- 文本的内容从框的顶部溢出，如下所示。
- 日期未粘在父
div的底部。
#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>
希望这能帮助解决溢出和定位的问题。
提前感谢。
英文:
I'm having a problem with my code.
my goal is to have a scrollable div with two other divs inside it.
one div has text,
the other has a date.
I'm facing two problems:
- the contents of the text spill out from the top of the box like so.
- the date does not stick to the bottom of the parent div.
My CSS goes as follow:
#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;}
The HTML part (written inside a JS function and HTML page):
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>
could really use some help with overflow and positioning here.
Thanks in advance.
答案1
得分: 1
对于位置，您可以依赖于sticky，对于溢出，您需要调整高度以匹配图像的大小，使用background-size:100% 100%。
这里是一个关于sticky行为的工作示例：
<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>
请注意，我已经将HTML部分提供给您，用于显示工作示例中的内容。
英文:
For the position you can rely on sticky and for the overflow, you need to adjust the height to match the size of the image of use background-size:100% 100%
Here is a working example for the sticky behavior
<!-- begin snippet: js hide: false console: true babel: false -->
<!-- language: lang-css -->
.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;
}
<!-- language: lang-html -->
<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>
<!-- end snippet -->
答案2
得分: 0
将overflow更改为overflow:scroll;并在任务容器中添加15px的填充。此外，如果有多个taskContainer实例，应该使用类而不是ID。
英文:
Can you change overflow to overflow:scroll; and also add a padding of 15px to the task container.
Also I feel if there are multiple instances of taskContainer it should be a class not an ID.
通过集体智慧和协作来改善编程学习和解决问题的方式。致力于成为全球开发者共同参与的知识库，让每个人都能够通过互相帮助和分享经验来进步。
评论