html - 修复了带有响应式 CSS 网格布局的页眉或页脚

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

由于您的固定位置元素已从文档流中移除，因此它不会像流入 block 元素那样自动展开全宽。您需要指定其尺寸。

将此添加到您的代码中:

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

revised codepen