将元素与 div 容器的底部对齐,并在滚动时停留在那里
Align Element to the bottom of a div container and stay there when scrolling
向下滚动时垃圾桶会向上移动,并且不会跨越父级的整个宽度div
我希望它是这样的:
.ParentDiv {
background: red;
overflow-y: scroll;
border: none;
float: left;
position: relative;
height: 80px;
width: 200px;
}
#DivAroundTrashcan{
position:fixed;
bottom: 0;
width: 100%;
height: 15px;
}
<html>
<head>
<meta charset="UTF-8">
</head>
<body>
<div class="ParentDiv" id="ParentDiv" >
<p1><center>efgf </center></p1>
<p2><center>wefwf </center></p2>
<p3><center>wefwef </center></p3>
<p4><center>wefwef </center></p4>
<p5><center>wefwef </center></p5>
<p6><center>wefweff </center></p6>
<p7><center>wefwef</center></p7>
<p8><center>wefwef </center></p8>
<div id="DivAroundTrashcan"><input type="button"id="Trashcan"value="🗑"></div>
</div>
</body>
</html>
位置:绝对;
只是让它停留在原处,但滚动时它不会停留在原处
将position: fixed
放在垃圾桶的容器div上,而不是绝对的。
您可以在您的容器上使用 flex:
html,
body {
height: 100%;
margin: 0;
}
.container {
display: flex;
flex-direction: column;
/*following is for demo only - not sure what gives your container height */
height: 100%;
}
.scroll {
flex-grow: 1;
overflow: auto;
}
.bin {
text-align: right;
}
<div class="container">
<div class="scroll">
content<br>content<br>content<br>content<br>content<br>content<br>content<br> content
<br>content<br>content<br>content<br>content<br>content<br>content<br> content
<br>content<br>content<br>content<br>content<br>content<br>content<br> content
<br>content<br>content<br>content<br>content<br>content<br>content<br> content<br>content<br>content<br>content<br>content<br>content<br>content<br>
</div>
<div class="bin">bottom bin content</div>
</div>
#DivAroundTrashcan{
position: fixed;
right: 0;
bottom: 0;
left: 0;
text-align: right;
}
向下滚动时垃圾桶会向上移动,并且不会跨越父级的整个宽度div
我希望它是这样的:
.ParentDiv {
background: red;
overflow-y: scroll;
border: none;
float: left;
position: relative;
height: 80px;
width: 200px;
}
#DivAroundTrashcan{
position:fixed;
bottom: 0;
width: 100%;
height: 15px;
}
<html>
<head>
<meta charset="UTF-8">
</head>
<body>
<div class="ParentDiv" id="ParentDiv" >
<p1><center>efgf </center></p1>
<p2><center>wefwf </center></p2>
<p3><center>wefwef </center></p3>
<p4><center>wefwef </center></p4>
<p5><center>wefwef </center></p5>
<p6><center>wefweff </center></p6>
<p7><center>wefwef</center></p7>
<p8><center>wefwef </center></p8>
<div id="DivAroundTrashcan"><input type="button"id="Trashcan"value="🗑"></div>
</div>
</body>
</html>
位置:绝对; 只是让它停留在原处,但滚动时它不会停留在原处
将position: fixed
放在垃圾桶的容器div上,而不是绝对的。
您可以在您的容器上使用 flex:
html,
body {
height: 100%;
margin: 0;
}
.container {
display: flex;
flex-direction: column;
/*following is for demo only - not sure what gives your container height */
height: 100%;
}
.scroll {
flex-grow: 1;
overflow: auto;
}
.bin {
text-align: right;
}
<div class="container">
<div class="scroll">
content<br>content<br>content<br>content<br>content<br>content<br>content<br> content
<br>content<br>content<br>content<br>content<br>content<br>content<br> content
<br>content<br>content<br>content<br>content<br>content<br>content<br> content
<br>content<br>content<br>content<br>content<br>content<br>content<br> content<br>content<br>content<br>content<br>content<br>content<br>content<br>
</div>
<div class="bin">bottom bin content</div>
</div>
#DivAroundTrashcan{
position: fixed;
right: 0;
bottom: 0;
left: 0;
text-align: right;
}