Question

我正在创建一个从屏幕底部开始动画的反应模式。一旦显示模态，我需要模态有一个固定/粘性页脚固定在浏览器窗口的底部。出于某种原因，目前页脚使用标准渲染屏幕：

position: absolute;
   bottom: 0;
   left: 0;
   right: 0;

请参阅随附的代码。

＆＃13;

.ReactModal__Overlay--after-open {
  opacity: 1;
  z-index: 99;
  position: fixed;
  top: 0;
  left: 0;
  right: 0;
  bottom: 0;
  background: rgba(46,46,51,.95);
}

.ReactModal__Content--after-open {
  z-index: 100;
  position: relative;
  width: auto;
  max-width: 500px;
  margin: 0 auto;
  bottom: 0%;
  background-color: #FFF;
}

.wrapper {
  background: yellow;
  position: absolute;
    bottom: 0;
    left: 0;
    right: 0;
    top: 112px;
  width: 480px;
  max-width: 480px;
  margin: 0 auto;
  border-radius: 12px 12px 0 0;
  height: 100vh;
  background: white;
}

.contentBody {
  background: pink;
}

.contentFooter {
  background: orange;
  position: absolute;
    bottom: 0;
    left: 0;
    right: 0;
}

＆＃13;

<div class="ReactModal__Overlay ReactModal__Overlay--after-open">
   <div class="ReactModal__Content ReactModal__Content--after-open">
      <div class="wrapper">
         <div class="contentBody">BODY</div>
         <div class="contentFooter">FOOTER</div>
      </div>
   </div>
</div>

＆＃13;

我做错了什么是阻止模态中的页脚固定在屏幕底部？

Answer 1

试试这个。

＆＃13;

.ReactModal__Overlay--after-open {
  opacity: 1;
  z-index: 99;
  position: fixed;
  top: 0;
  left: 0;
  right: 0;
  bottom: 0;
  background: rgba(46,46,51,.95);
}

.ReactModal__Content--after-open {
  z-index: 100;
  position: fixed;
  bottom: 0;
  left: 0;
  right: 0;
  width: auto;
  max-width: 500px;
  margin: 0 auto;
  bottom: 0%;
  background-color: #FFF;

}

.wrapper {
  background: yellow;
  position: relative;
  margin: 0 auto;
  border-radius: 12px 12px 0 0;
  height: calc(100vh - 115px);
  background: white;
}

.contentBody {
  background: pink;
  position: absolute;
  top: 0;
  left: 0;
  right: 0;
}

.contentFooter {
  background: orange;
  position: absolute;
    bottom: 0;
    left: 0;
    right: 0;
}

＆＃13;

<body>
 <div class="ReactModal__Overlay ReactModal__Overlay--after-open">
   <div class="ReactModal__Content ReactModal__Content--after-open">
      <div class="wrapper">
         <div class="contentBody">BODY</div>
         <div class="contentFooter">FOOTER</div>
      </div>
   </div>
</div>
</body>

＆＃13;

如何在模态中创建固定页脚？

1 个答案: