Fixed Header or Footer with responsive CSS Grid layout inside
0
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 css css3 css-grid
edited Nov 13 '18 at 1:53
Michael_B
146k47234340
asked Nov 13 '18 at 1:07
Simon RogersSimon Rogers
326
add a comment |
0
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 css css3 css-grid
edited Nov 13 '18 at 1:53
Michael_B
146k47234340
asked Nov 13 '18 at 1:07
Simon RogersSimon Rogers
326
add a comment |
0
0
0
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 css css3 css-grid
edited Nov 13 '18 at 1:53
Michael_B
146k47234340
asked Nov 13 '18 at 1:07
Simon RogersSimon 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
html css css3 css-grid
edited Nov 13 '18 at 1:53
Michael_B
146k47234340
asked Nov 13 '18 at 1:07
Simon RogersSimon Rogers
326
edited Nov 13 '18 at 1:53
Michael_B
146k47234340
asked Nov 13 '18 at 1:07
Simon RogersSimon Rogers
326
edited Nov 13 '18 at 1:53
Michael_B
146k47234340
edited Nov 13 '18 at 1:53
Michael_B
146k47234340
edited Nov 13 '18 at 1:53
Michael_B
146k47234340
146k47234340
asked Nov 13 '18 at 1:07
Simon RogersSimon Rogers
326
asked Nov 13 '18 at 1:07
Simon RogersSimon Rogers
326
asked Nov 13 '18 at 1:07
Simon RogersSimon Rogers
326
326
add a comment |
add a comment |
1 Answer
1
active
oldest
votes
1
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
answered Nov 13 '18 at 1:21
Michael_BMichael_B
146k47234340
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');
);
Sign up using Google
Sign up using Facebook
Sign up using Email and Password
Post as a guest
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
Required, but never shown
1 Answer
1
active
oldest
votes
1 Answer
1
active
oldest
votes
active
oldest
votes
active
oldest
votes
1
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
answered Nov 13 '18 at 1:21
Michael_BMichael_B
146k47234340
add a comment |
1
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
answered Nov 13 '18 at 1:21
Michael_BMichael_B
146k47234340
add a comment |
1
1
1
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
answered Nov 13 '18 at 1:21
Michael_BMichael_B
146k47234340
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
answered Nov 13 '18 at 1:21
Michael_BMichael_B
146k47234340
edited Nov 13 '18 at 1:58
answered Nov 13 '18 at 1:21
Michael_BMichael_B
146k47234340
answered Nov 13 '18 at 1:21
Michael_BMichael_B
146k47234340
answered Nov 13 '18 at 1:21
Michael_BMichael_B
146k47234340
146k47234340
add a comment |
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.
Some of your past answers have not been well-received, and you're in danger of being blocked from answering.
Please pay close attention to the following guidance:
- 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');
);
Sign up using Google
Sign up using Facebook
Sign up using Email and Password
Post as a guest
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
Required, but never shown
Sign up or log in
StackExchange.ready(function ()
StackExchange.helpers.onClickDraftSave('#login-link');
);
Sign up using Google
Sign up using Facebook
Sign up using Email and Password
Post as a guest
Required, but never shown
Sign up or log in
StackExchange.ready(function ()
StackExchange.helpers.onClickDraftSave('#login-link');
);
Sign up using Google
Sign up using Facebook
Sign up using Email and Password
Post as a guest
Required, but never shown
Sign up or log in
StackExchange.ready(function ()
StackExchange.helpers.onClickDraftSave('#login-link');
);
Sign up using Google
Sign up using Facebook
Sign up using Email and Password
Sign up using Google
Sign up using Facebook
Sign up using Email and Password
Post as a guest
Required, but never shown
Required, but never shown
Required, but never shown
Required, but never shown
Required, but never shown
Required, but never shown
Required, but never shown
Required, but never shown
Required, but never shown
