Fixed Header or Footer with responsive CSS Grid layout inside

I need to make a webpage where the footer is fixed, and the content inside the footer is laid-out using CSS Grid.

But when I apply position: fixed; to the footer, the column widths no longer fill the page and change to the width of the longest line of text instead.

How can I make this work?

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>

edited Nov 13 '18 at 1:53

Michael_B

147k47235344

asked Nov 13 '18 at 1:07

Simon Rogers

326

add a comment |

I need to make a webpage where the footer is fixed, and the content inside the footer is laid-out using CSS Grid.

But when I apply position: fixed; to the footer, the column widths no longer fill the page and change to the width of the longest line of text instead.

How can I make this work?

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>

edited Nov 13 '18 at 1:53

Michael_B

147k47235344

asked Nov 13 '18 at 1:07

Simon Rogers

326

add a comment |

I need to make a webpage where the footer is fixed, and the content inside the footer is laid-out using CSS Grid.

But when I apply position: fixed; to the footer, the column widths no longer fill the page and change to the width of the longest line of text instead.

How can I make this work?

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>

edited Nov 13 '18 at 1:53

Michael_B

147k47235344

asked Nov 13 '18 at 1:07

Simon Rogers

326

I need to make a webpage where the footer is fixed, and the content inside the footer is laid-out using CSS Grid.

But when I apply position: fixed; to the footer, the column widths no longer fill the page and change to the width of the longest line of text instead.

How can I make this work?

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>

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>

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>

html css css3 css-grid

edited Nov 13 '18 at 1:53

Michael_B

147k47235344

asked Nov 13 '18 at 1:07

Simon Rogers

326

edited Nov 13 '18 at 1:53

Michael_B

147k47235344

asked Nov 13 '18 at 1:07

Simon Rogers

326

edited Nov 13 '18 at 1:53

Michael_B

147k47235344

edited Nov 13 '18 at 1:53

Michael_B

147k47235344

edited Nov 13 '18 at 1:53

Michael_B

147k47235344

asked Nov 13 '18 at 1:07

Simon Rogers

326

asked Nov 13 '18 at 1:07

Simon Rogers

326

asked Nov 13 '18 at 1:07

Simon Rogers

326

add a comment |

1 Answer
1

active

oldest

votes

Since your fixed-position element is removed from the document flow, it won't automatically expand full width, like an in-flow block element. You need to specify its dimensions.

Add this to your code:

.fixed-footer-grid-container {

    position: fixed;

    bottom: 0;

    width: 100%; /* new */

}

revised codepen

edited Nov 13 '18 at 1:58

answered Nov 13 '18 at 1:21

Michael_B

147k47235344

add a comment |

Your Answer

StackExchange.ifUsing("editor", function () {
StackExchange.using("externalEditor", function () {
StackExchange.using("snippets", function () {
StackExchange.snippets.init();
});
});
}, "code-snippets");

StackExchange.ready(function() {
var channelOptions = {
tags: "".split(" "),
id: "1"
};
initTagRenderer("".split(" "), "".split(" "), channelOptions);

StackExchange.using("externalEditor", function() {
// Have to fire editor after snippets, if snippets enabled
if (StackExchange.settings.snippets.snippetsEnabled) {
StackExchange.using("snippets", function() {
createEditor();
});
}
else {
createEditor();
}
});

function createEditor() {
StackExchange.prepareEditor({
heartbeatType: 'answer',
autoActivateHeartbeat: false,
convertImagesToLinks: true,
noModals: true,
showLowRepImageUploadWarning: true,
reputationToPostImages: 10,
bindNavPrevention: true,
postfix: "",
imageUploader: {
brandingHtml: "Powered by u003ca class="icon-imgur-white" href="https://imgur.com/"u003eu003c/au003e",
contentPolicyHtml: "User contributions licensed under u003ca href="https://creativecommons.org/licenses/by-sa/3.0/"u003ecc by-sa 3.0 with attribution requiredu003c/au003e u003ca href="https://stackoverflow.com/legal/content-policy"u003e(content policy)u003c/au003e",
allowUrls: true
},
onDemand: true,
discardSelector: ".discard-answer"
,immediatelyShowMarkdownHelp:true
});

}
});

draft saved

draft discarded

Sign up or log in

StackExchange.ready(function () {
StackExchange.helpers.onClickDraftSave('#login-link');
});

Post as a guest

Name

Required, but never shown

StackExchange.ready(
function () {
StackExchange.openid.initPostLogin('.new-post-login', 'https%3a%2f%2fstackoverflow.com%2fquestions%2f53272313%2ffixed-header-or-footer-with-responsive-css-grid-layout-inside%23new-answer', 'question_page');
}
);

Post as a guest

Name

Required, but never shown

1 Answer
1

active

oldest

votes

1 Answer
1

active

oldest

votes

Since your fixed-position element is removed from the document flow, it won't automatically expand full width, like an in-flow block element. You need to specify its dimensions.

Add this to your code:

.fixed-footer-grid-container {

    position: fixed;

    bottom: 0;

    width: 100%; /* new */

}

revised codepen

edited Nov 13 '18 at 1:58

answered Nov 13 '18 at 1:21

Michael_B

147k47235344

add a comment |

Since your fixed-position element is removed from the document flow, it won't automatically expand full width, like an in-flow block element. You need to specify its dimensions.

Add this to your code:

.fixed-footer-grid-container {

    position: fixed;

    bottom: 0;

    width: 100%; /* new */

}

revised codepen

edited Nov 13 '18 at 1:58

answered Nov 13 '18 at 1:21

Michael_B

147k47235344

add a comment |

Since your fixed-position element is removed from the document flow, it won't automatically expand full width, like an in-flow block element. You need to specify its dimensions.

Add this to your code:

.fixed-footer-grid-container {

    position: fixed;

    bottom: 0;

    width: 100%; /* new */

}

revised codepen

edited Nov 13 '18 at 1:58

answered Nov 13 '18 at 1:21

Michael_B

147k47235344

Since your fixed-position element is removed from the document flow, it won't automatically expand full width, like an in-flow block element. You need to specify its dimensions.

Add this to your code:

.fixed-footer-grid-container {

    position: fixed;

    bottom: 0;

    width: 100%; /* new */

}

revised codepen

edited Nov 13 '18 at 1:58

answered Nov 13 '18 at 1:21

Michael_B

147k47235344

edited Nov 13 '18 at 1:58

answered Nov 13 '18 at 1:21

Michael_B

147k47235344

answered Nov 13 '18 at 1:21

Michael_B

147k47235344

answered Nov 13 '18 at 1:21

Michael_B

147k47235344

add a comment |

draft saved

draft discarded

Thanks for contributing an answer to Stack Overflow!

Please be sure to answer the question. Provide details and share your research!

But avoid …

Asking for help, clarification, or responding to other answers.

Making statements based on opinion; back them up with references or personal experience.

To learn more, see our tips on writing great answers.

draft saved

draft discarded

Sign up or log in

StackExchange.ready(function () {
StackExchange.helpers.onClickDraftSave('#login-link');
});

Post as a guest

Name

Required, but never shown

Post as a guest

Name

Required, but never shown

Sign up or log in

StackExchange.ready(function () {
StackExchange.helpers.onClickDraftSave('#login-link');
});

Post as a guest

Name

Required, but never shown

Sign up or log in

StackExchange.ready(function () {
StackExchange.helpers.onClickDraftSave('#login-link');
});

Post as a guest

Name

Required, but never shown

Sign up or log in

StackExchange.ready(function () {
StackExchange.helpers.onClickDraftSave('#login-link');
});

Post as a guest

Name

Required, but never shown

Name

Required, but never shown

Name

Required, but never shown

This page is only for reference, If you need detailed information, please check here

搜尋此網誌

Nrthugu