Question

我有一个可滚动的容器，我希望在容器底部的中间显示一个图像，当我向下滚动时，它将保留在屏幕上的相同位置。我该怎么做？现在我有这样的事情：

＆＃13;

    #container {
        height: 80vh;
        border: 1px solid black;
        padding: 0 !important;
        overflow-y: auto;
        overflow-x: hidden;
        position: relative;
    }
    
    #fixed {
        position: fixed;
        bottom: 0;
        left:0;
        right:0;
        margin-left:auto;
        margin-right:auto;
        background-image: url('../images/img.png');
        width: 256px;
        height: 256px;
    }

＆＃13;

    <div id="container">
      // scrollable content
      <div id="fixed">
      </div>
    </div>

＆＃13;

但是图像似乎完全不合适。当我继续滚动时Position: absolute使元素消失。我该如何解决这个问题？

Answer 1

这是一个解决方案：

草稿的主要更改：min-height容器：100vh（窗口的完整高度），以及一些详细信息（margin: 0;上的body，容器上的box-sizing: border-box;，{图片div上的{1}}

bottom: 1px

body {
  margin: 0;
}
#container {
  min-height: 100vh;
  box-sizing: border-box;
  border: 1px solid black;
  padding: 0 !important;
  overflow-y: auto;
  overflow-x: hidden;
  position: relative;
}
#fixed {
  position: fixed;
  bottom: 1px;
  left: 0;
  right: 0;
  margin-left: auto;
  margin-right: auto;
  background-image: url('http://placehold.it/256');
  width: 256px;
  height: 256px;
}

Answer 2

您可以使用flexbox布局。

<强> jsFiddle

＆＃13;

#container {
  height: 80vh;
  border: 1px solid;
  display: flex;
  flex-direction: column;
}
#scroll {
  background: pink;
  overflow: auto;
  flex: 1;
}
#fixed {
  background: silver;
  flex: 0 0 30px;
}

＆＃13;

<div id="container">
  <div id="scroll">
    <div style="height: 200vh;"></div>
  </div>
  <div id="fixed">
  </div>
</div>

＆＃13;

绝对位置并固定在可滚动容器中

2 个答案: