html - 如何在滚动屏幕底部修复一个容器并确保该容器是流动的？

Question

我有一个固定在屏幕底部的容器。

我希望容器“black-bg”根据其中的段落内容扩展和收缩（流体）。其上方的 div“图形”也应该相对于“black-bg” div 移动，而不是固定

目前“black-bg”和“graphic”是固定在同一个地方，无论段落内容是否变化都不会移动。

我也希望容器“black-bg”div底部对齐而不是顶部对齐在“my-container”div中，以便它位于顶部“options”div上

我的代码如下：

.my-container {
  position: fixed;
  bottom: 0;
  left: 0;
  width: 100%;
  color: #fff;
  text-align: center;
  font-size: 1.37rem;
  padding: 13px 0 0;
  cursor: pointer;
  z-index: 9999;
  /* opacity: 0.1; */
  min-height: 222px;
  max-height: 752px;
}

.black-bg {
  background-color: #000;
  padding: 27px 23px 67px 90px;
  z-index: 5;
  top: -19px;
  position: relative;
  background: rgba(0, 0, 0, 0.9);
}

.options {
  background-color: #b1151b;
  position: absolute;
  bottom: 0;
  left: 0;
  width: 100%;
  color: #fff;
  text-align: center;
  font-size: 1.37rem;
  padding: 0 13px;
  cursor: pointer;
  z-index: 30;
  display: -webkit-box;
  display: -ms-flexbox;
  display: flex;
  -webkit-box-orient: horizontal;
  -webkit-box-direction: normal;
  -ms-flex-direction: row;
  flex-direction: row;
  -ms-flex-wrap: nowrap;
  flex-wrap: nowrap;
  -webkit-box-pack: justify;
  -ms-flex-pack: justify;
  justify-content: space-between;
}

.options a {
  color: #fff;
  text-decoration: none;
  display: block;
}

.options>a.left-btn {
  border-right: 1px solid #000;
  padding-left: 85px;
}

.options>a.left-btn,
.options>a.right-btn {
  width: 50%;
  padding: 13px;
}

<div class="my-container">

  <div class="graphic">
    <div>Graphic will go here</div>
  </div>
  <div class="black-bg">

    <p>Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam</p>
    <h4>Duis aute irure dolor in reprehenderit</h4>
  </div>
  <div class="options">
    <a href="#" class="left-btn">Yes</a>
    <a href="#" class="right-btn">No</a>
  </div>

</div>

标签： htmlcss

Answer 1

我不太清楚这是否是您想要的，但我认为您遇到的问题是您已应用于position: fixed最外层的容器，因此您的整个内容都是固定的。

我认为只想修复页脚，而不是像这样的所有内容：

.footer {
  position: fixed;
  z-index: 9999;
  bottom: 0;
  left: 0;
  width: 100%;
}

.container{
  color: white;
    width: 100%;
  text-align: center;
  font-size: 1.37rem;
  padding: 13px 0 0;
  cursor: pointer;
  /* opacity: 0.1; */
  min-height: 222px;
  max-height: 752px;
  }

.black-bg {
  background-color: #000;
  padding: 27px 23px 67px 90px;
  z-index: 5;
  top: -19px;
  position: relative;
  background: rgba(0, 0, 0, 0.9);
}

.options {
  background-color: #b1151b;
  position: absolute;
  bottom: 0;
  left: 0;
  width: 100%;
  color: #fff;
  text-align: center;
  font-size: 1.37rem;
  padding: 0 13px;
  cursor: pointer;
  z-index: 30;
  display: -webkit-box;
  display: -ms-flexbox;
  display: flex;
  -webkit-box-orient: horizontal;
  -webkit-box-direction: normal;
  -ms-flex-direction: row;
  flex-direction: row;
  -ms-flex-wrap: nowrap;
  flex-wrap: nowrap;
  -webkit-box-pack: justify;
  -ms-flex-pack: justify;
  justify-content: space-between;
}

.options a {
  color: #fff;
  text-decoration: none;
  display: block;
}

.options>a.left-btn {
  border-right: 1px solid #000;
  padding-left: 85px;
}

.options>a.left-btn,
.options>a.right-btn {
  width: 50%;
  padding: 13px;
}

<div class="container">

  <div class="graphic">
    <div>Graphic will go here</div>
  </div>
  <div class="black-bg">

    <p>Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam
    Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam
    Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam
    iusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam
    Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam
    iusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam
    Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam

</p>
    <h4>Duis aute irure dolor in reprehenderit</h4>
  </div>


</div>
<div class="footer">
  <div class="options">
    <a href="#" class="left-btn">Yes</a>
    <a href="#" class="right-btn">No</a>
  </div>
</div>