Как создать фиксированный нижний колонтитул в модале?

Question

Как создать фиксированный нижний колонтитул в модале?

Я создаю реагирующий модал, который оживляет в нижней части экрана. После того, как модал отображается, мне нужно, чтобы модал имел фиксированный / закрепленный нижний колонтитул, который зафиксирован в нижней части окна браузера. По какой-то причине в настоящее время нижний колонтитул выводится за пределы экрана с использованием стандарта:

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>

Что я делаю не так, что мешает закрепить нижний колонтитул в модале внизу экрана?

1

html css html5 css3 react-modal

Источник

user149080 12 апр '18 в 17:26

1 ответ

Решение

Другие вопросы по тегам html css html5 css3 react-modal

user9173422 12 апр '18 в 18:56 2018-04-12 18:56 · Accepted Answer · 2018-04-12 18:56

Попробуй это.

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