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

Question

我正在创建一个从屏幕底部开始动画的反应模态。显示模式后，我需要模式有一个 fixed/sticky 固定在浏览器底部的页脚 window。出于某种原因，目前页脚正在使用标准呈现在屏幕外：

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

请看附件代码。

.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;
}

<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>

我做错了什么导致模态框内的页脚无法固定在屏幕底部？

Answer 1

试试这个。

.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;
}

<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>

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

How to create a fixed footer within a modal?

html

css

react-modal