Исправлен верхний или нижний колонтитул с адаптивным макетом CSS Grid внутри

Question

Мне нужно создать веб-страницу, на которой зафиксирован нижний колонтитул, а содержимое внутри нижнего колонтитула выложено с использованием CSS Grid.

Но когда я применяю position: fixed; к нижнему колонтитулу, ширина столбцов больше не заполняет страницу и вместо этого изменяется на ширину самой длинной строки текста.

Как я могу заставить эту работу?

https://codepen.io/simonhrogers/pen/pQNYjW

html, body {
  padding: 0;
  margin: 0;
}

img {
  width: 100%;
}

.image-grid {
  max-width: 100%;
  display: grid;
  grid-template-columns: 1fr 1fr 1fr;
  grid-column-gap: 2em;
  grid-row-gap: calc(2em - 0.22em);
  padding-left: 2em;
  padding-right: 2em;
  padding-top: 2em;
  padding-bottom: calc(2em - 0.22em);
}

.footer-grid {
  display: grid;
  grid-template-columns: 1fr 1fr 1fr;
  grid-column-gap: 2em;
  grid-row-gap: calc(2em - 0.22em);
  padding-top: 2em;
  padding-bottom: 2em;
  padding-left: 2em;
  padding-right: 2em;
  bottom: 0;
  background-color: green;
  opacity: 0.75;
}


li {
  list-style-type: none;
}

ul {
  padding: 0;
}

.fixed-footer-grid {
  display: grid;
  grid-template-columns: 1fr 1fr 1fr;
  grid-column-gap: 2em;
  grid-row-gap: calc(2em - 0.22em);
  padding-top: 2em;
  padding-bottom: 2em;
  padding-left: 2em;
  padding-right: 2em;
  bottom: 0;
  background-color: red;
  opacity: 0.75;
}

.fixed-footer-grid-container {
  position: fixed;
  bottom: 0;
}

<div class="image-grid">
  <div class="image">
    <img src="http://img2.storyblok.com/1400x0/filters:format(webp)/f/45723/2835x3543/6531101ff6/jr_0209_hb_aw18_campaign_mf_sp_4.jpg" alt="">
  </div>
    <div class="image">
    <img src="http://img2.storyblok.com/1400x0/filters:format(webp)/f/45723/2835x3543/6531101ff6/jr_0209_hb_aw18_campaign_mf_sp_4.jpg" alt="">
  </div>
    <div class="image">
    <img src="http://img2.storyblok.com/1400x0/filters:format(webp)/f/45723/2835x3543/6531101ff6/jr_0209_hb_aw18_campaign_mf_sp_4.jpg" alt="">
  </div>
    <div class="image">
    <img src="http://img2.storyblok.com/1400x0/filters:format(webp)/f/45723/2835x3543/6531101ff6/jr_0209_hb_aw18_campaign_mf_sp_4.jpg" alt="">
  </div>
    <div class="image">
    <img src="http://img2.storyblok.com/1400x0/filters:format(webp)/f/45723/2835x3543/6531101ff6/jr_0209_hb_aw18_campaign_mf_sp_4.jpg" alt="">
  </div>
    <div class="image">
    <img src="http://img2.storyblok.com/1400x0/filters:format(webp)/f/45723/2835x3543/6531101ff6/jr_0209_hb_aw18_campaign_mf_sp_4.jpg" alt="">
  </div>
</div>

<div class="footer-grid">
    <div class="credits">
      <ul>
        <li>Correct Column Layout</li>
      </ul>
    </div>
    <div class="credits">
      <ul>
        <li>Correct Column Layout</li>
        <li>Correct Column Layout</li>
        <li>Correct Column Layout</li>
        <li>Correct Column Layout</li>
        <li>Correct Column Layout</li>
      </ul>
    </div>
    <div class="credits right">
      <ul>
        <li>But Needs to be Fixed Position at Bottom</li>
      </ul>
    </div>
</div>

<div class="fixed-footer-grid-container">
  <div class="fixed-footer-grid">
    <div class="credits">
      <ul>
        <li>Incorrect Column Width</li>
      </ul>
    </div>
    <div class="credits">
      <ul>
        <li>Incorrect Column Width</li>
        <li>Incorrect Column Width</li>
        <li>Incorrect Column Width</li>
        <li>Incorrect Column Width</li>
        <li>Incorrect Column Width</li>
      </ul>
    </div>
    <div class="credits right">
      <ul>
        <li>Needs to be 100% screen width</li>
      </ul>
    </div>
  </div>
</div>

Answer 1

Поскольку ваш элемент с фиксированной позицией удаляется из потока документов, он не будет автоматически расширяться на всю ширину, как элемент блока в потоке. Вам необходимо указать его размеры.

Добавьте это к своему коду:

.fixed-footer-grid-container {
    position: fixed;
    bottom: 0;
    width: 100%; /* new */
}

пересмотренная кодовая ручка