如何使用 css 创建粘性背景？答案

【问题标题】：How to create a sticky background using css?如何使用 css 创建粘性背景？
【发布时间】：2021-05-29 01:48:33
【问题描述】：

我正在尝试使用 CSS 创建粘性背景，
像这样的东西（粉红色的背景将被完全填充，但例如为了我保持最小可见高度）

html,
body {
  margin: 0;
  height: 100%;
  width: 100%;
  max-height: 100%;
  max-width: 100%;
}

#header {
  height: 100px;
  background: black;
  width: 100%;
}

#rest {
  min-height: 100%;
  width: 100%;
  background: blue;

}

#content {
  width: 50%;
  background: yellow;
  height: 100%;
  margin: auto;
  position: relative;
  z-index: 1;
}
#sticky_back
{
  position:sticky;
  top:0;
  height:50px;
  width:100%;
  background-color: pink;


}

<!DOCTYPE html>
<html>

  <head>
    <link rel="stylesheet" href="style.css">
  </head>

  <body>
    <div id="header"></div>
    <div id="rest">
      <div id="sticky_back"></div>
      <div id="content">
        <span>
          Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum.Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum.Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum.Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum.Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum.Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut
      </div>

    </div>
    </body>
</html>

但我似乎无法重叠 2 粉色和黄色 divs
如果我尝试更改position:absolute 和relative，则content 中的文本会像这样溢出

html,
body {
  margin: 0;
  height: 100%;
  width: 100%;
  max-height: 100%;
  max-width: 100%;
}

#header {
  height: 100px;
  background: black;
  width: 100%;

}

#rest {
  min-height: 100%;
  width: 100%;
  background: blue;
    position: relative;
}

#content {
min-height:100%;
  width: 50%;
  background: yellow;
  position: absolute;
  left: 50%;
  transform: translate(-50%,0%);
  top:0;
  z-index: 1;
}
#sticky_back
{
  position:sticky;
  top:0;
  height:50px;
  width:100%;
  background-color: pink;


}

<!DOCTYPE html>
<html>

  <head>
    <link rel="stylesheet" href="style.css">
  </head>

  <body>
    <div id="header"></div>
    <div id="rest">
      <div id="sticky_back"></div>
      <div id="content">
        <span>
           psum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum.Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum.Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum.Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum.Lorem ipsum dolor st dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu f
    </div>
    </body>
</html>

有什么方法可以在避免溢出的同时创建所需的背景？

编辑
如果您正在寻找完全后台填充解决方案，请查看此链接：
How to fit a sticky background image and prevent overflow in css?

【问题讨论】：

标签： html css

【解决方案1】：

由于#sticky_back 的height 未知，您可以使用grid 布局。

将display: grid 添加到父级（#rest），并将grid-area: 1 / 1 / 2 / 2 添加到两个子级（#content 和#stick_back）。

您还需要将z-index: 0 添加到#content 以将元素置于最前面。

#rest {
  display: grid;
  grid-template-columns: auto 1fr;
  grid-template-rows: auto 1fr;
  .
  .
  .
   
 #content {
  z-index: 0;
  grid-area: 1 / 1 / 2 / 2;
  margin: 0 auto;
  .
  .
  .
  
 #sticky_back {
  grid-area: 1 / 1 / 2 / 2;  
  .
  .
  .

html,
body {
  margin: 0;
  width: 100%;
  max-height: 100%;
  max-width: 100%;
}

#header {
  height: 100px;
  width: 100%;
  background: black;  
}

#rest {
  display: grid;
  grid-template-columns: auto 1fr;
  grid-template-rows: auto 1fr;
  background: blue;
}

#content {
  width: 50%;
  z-index: 0;  
  grid-area: 1 / 1 / 2 / 2;
  margin: 0 auto;
  background: yellow;
}

#sticky_back {
  width: 100%;
  height: 50px;
  grid-area: 1 / 1 / 2 / 2;  
  position: sticky;
  top: 0;
  background-color: pink;
}

<html>

<head>
  <link rel="stylesheet" href="style.css">
</head>

<body>
  <div id="header"></div>
  <div id="rest">
    <div id="sticky_back"></div>
    <div id="content">
      <span>
        psum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum.Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum.Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum.Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum.Lorem ipsum dolor st dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu f
      </span>
    </div>
  </div>
</body>

</html>

【讨论】：

如果高度未知？
@lemonface，当粉红色背景（#sticky_back）的height 未知时，我已经调整了我的初始答案。看看...
谢谢它的工作！但是如果我用背景图像替换粉红色条，它会起作用吗？类似 jsfiddle.net/w4j1e68L/3 的东西，但图像是 stackoverflow.com/questions/14142378/… 中的“最佳情况”
@lemonface，如果粉红色条是背景图像，它将起作用：codepen.io/gcwebdev/pen/gOLeNNe。确保您的img 选择器前面没有#。它应该是 #sticky_back img 而不是 #img。