将Element与div容器的底部对齐，并在滚动时停留在此处

问题描述

当向下滚动时，垃圾箱会向上移动，并且不会跨越父级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="&#128465"></div>
</div>

</body>
</html>

位置：绝对； 只是使其停留在原处，但是在滚动时并不会停留在原处

解决方法

将SQL> select 1,2,3 2 from dual 3 connect by level <= 10; 1 2 3 ---------- ---------- ---------- 1 2 3 1 2 3 1 2 3 1 2 3 1 2 3 1 2 3 1 2 3 1 2 3 1 2 3 1 2 3 10 rows selected. SQL>放在垃圾箱的容器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;
}

alignment html scrollbar scrollview scrollview

将Element与div容器的底部对齐，并在滚动时停留在此处

问题描述

解决方法

相关问答