Make footer move up when content appears at the bottom
4
I have bottom fixed footer and content that appears at the bottom too, but I want to make my footer go up when that content is loaded (and kinda stick it to the top of the content). How do I do that?
For styling I'm using SASS
<footer>
<div className="social-icons">
<div className="icon">
<a href="http://fb.me">
<i className="fab fa-facebook-f"></i>
</a>
</div>
<div className="icon">
<a href="https://twitter.com/">
<i className="fab fa-twitter"></i>
</a>
</div>
<div className="icon">
<a href="https://www.linkedin.com/">
<i className="fab fa-linkedin-in"></i>
</a>
</div>
<div className="icon">
<a href="https://plus.google.com/discover">
<i className="fab fa-google-plus-g"></i>
</a>
</div>
</div>
<div class="arrow"></div>
</footer>
sass:
footer
position: fixed
z-index: 10
width: 100vw
bottom: 0
display: flex
justify-content: space-between
box-sizing: border-box
flex-wrap: nowrap
padding: 0 6.25vw 2.6042vw 6.35vw
The content which has to be loaded at the bottom and move the footer up:
<div class="content"></div>
sass
.content
position: absolute
bottom: 0
z-index: 30
height: 6.25vw
width: 100%
background-color: $white
javascript html css sass
asked Nov 14 '18 at 9:08
8lurryface8lurryface
217
|
show 6 more comments
4
I have bottom fixed footer and content that appears at the bottom too, but I want to make my footer go up when that content is loaded (and kinda stick it to the top of the content). How do I do that?
For styling I'm using SASS
<footer>
<div className="social-icons">
<div className="icon">
<a href="http://fb.me">
<i className="fab fa-facebook-f"></i>
</a>
</div>
<div className="icon">
<a href="https://twitter.com/">
<i className="fab fa-twitter"></i>
</a>
</div>
<div className="icon">
<a href="https://www.linkedin.com/">
<i className="fab fa-linkedin-in"></i>
</a>
</div>
<div className="icon">
<a href="https://plus.google.com/discover">
<i className="fab fa-google-plus-g"></i>
</a>
</div>
</div>
<div class="arrow"></div>
</footer>
sass:
footer
position: fixed
z-index: 10
width: 100vw
bottom: 0
display: flex
justify-content: space-between
box-sizing: border-box
flex-wrap: nowrap
padding: 0 6.25vw 2.6042vw 6.35vw
The content which has to be loaded at the bottom and move the footer up:
<div class="content"></div>
sass
.content
position: absolute
bottom: 0
z-index: 30
height: 6.25vw
width: 100%
background-color: $white
javascript html css sass
asked Nov 14 '18 at 9:08
8lurryface8lurryface
217
Your CSS is missing braces.
– Script47
Nov 14 '18 at 9:09
2
I wonder how this code works, without braces :o
– Viira
Nov 14 '18 at 9:10
sorry, forgot to say that i'm using sass
– 8lurryface
Nov 14 '18 at 9:11
i'm a bit confused to what you are trying to do. what to you want to happen with your footer ? go up ? like to the top of the page ? or change the z-index ?
– Dirk
Nov 14 '18 at 9:14
@לבני מלכה sAss does not use braces, sCss does
– Dirk
Nov 14 '18 at 9:15
|
show 6 more comments
4
4
4
I have bottom fixed footer and content that appears at the bottom too, but I want to make my footer go up when that content is loaded (and kinda stick it to the top of the content). How do I do that?
For styling I'm using SASS
<footer>
<div className="social-icons">
<div className="icon">
<a href="http://fb.me">
<i className="fab fa-facebook-f"></i>
</a>
</div>
<div className="icon">
<a href="https://twitter.com/">
<i className="fab fa-twitter"></i>
</a>
</div>
<div className="icon">
<a href="https://www.linkedin.com/">
<i className="fab fa-linkedin-in"></i>
</a>
</div>
<div className="icon">
<a href="https://plus.google.com/discover">
<i className="fab fa-google-plus-g"></i>
</a>
</div>
</div>
<div class="arrow"></div>
</footer>
sass:
footer
position: fixed
z-index: 10
width: 100vw
bottom: 0
display: flex
justify-content: space-between
box-sizing: border-box
flex-wrap: nowrap
padding: 0 6.25vw 2.6042vw 6.35vw
The content which has to be loaded at the bottom and move the footer up:
<div class="content"></div>
sass
.content
position: absolute
bottom: 0
z-index: 30
height: 6.25vw
width: 100%
background-color: $white
javascript html css sass
asked Nov 14 '18 at 9:08
8lurryface8lurryface
217
I have bottom fixed footer and content that appears at the bottom too, but I want to make my footer go up when that content is loaded (and kinda stick it to the top of the content). How do I do that?
For styling I'm using SASS
<footer>
<div className="social-icons">
<div className="icon">
<a href="http://fb.me">
<i className="fab fa-facebook-f"></i>
</a>
</div>
<div className="icon">
<a href="https://twitter.com/">
<i className="fab fa-twitter"></i>
</a>
</div>
<div className="icon">
<a href="https://www.linkedin.com/">
<i className="fab fa-linkedin-in"></i>
</a>
</div>
<div className="icon">
<a href="https://plus.google.com/discover">
<i className="fab fa-google-plus-g"></i>
</a>
</div>
</div>
<div class="arrow"></div>
</footer>
sass:
footer
position: fixed
z-index: 10
width: 100vw
bottom: 0
display: flex
justify-content: space-between
box-sizing: border-box
flex-wrap: nowrap
padding: 0 6.25vw 2.6042vw 6.35vw
The content which has to be loaded at the bottom and move the footer up:
<div class="content"></div>
sass
.content
position: absolute
bottom: 0
z-index: 30
height: 6.25vw
width: 100%
background-color: $white
javascript html css sass
javascript html css sass
asked Nov 14 '18 at 9:08
8lurryface8lurryface
217
asked Nov 14 '18 at 9:08
8lurryface8lurryface
217
edited Nov 14 '18 at 9:58
8lurryface
asked Nov 14 '18 at 9:08
8lurryface8lurryface
217
asked Nov 14 '18 at 9:08
8lurryface8lurryface
217
asked Nov 14 '18 at 9:08
8lurryface8lurryface
217
217
Your CSS is missing braces.
– Script47
Nov 14 '18 at 9:09
2
I wonder how this code works, without braces :o
– Viira
Nov 14 '18 at 9:10
sorry, forgot to say that i'm using sass
– 8lurryface
Nov 14 '18 at 9:11
i'm a bit confused to what you are trying to do. what to you want to happen with your footer ? go up ? like to the top of the page ? or change the z-index ?
– Dirk
Nov 14 '18 at 9:14
@לבני מלכה sAss does not use braces, sCss does
– Dirk
Nov 14 '18 at 9:15
|
show 6 more comments
Your CSS is missing braces.
– Script47
Nov 14 '18 at 9:09
2
I wonder how this code works, without braces :o
– Viira
Nov 14 '18 at 9:10
sorry, forgot to say that i'm using sass
– 8lurryface
Nov 14 '18 at 9:11
i'm a bit confused to what you are trying to do. what to you want to happen with your footer ? go up ? like to the top of the page ? or change the z-index ?
– Dirk
Nov 14 '18 at 9:14
@לבני מלכה sAss does not use braces, sCss does
– Dirk
Nov 14 '18 at 9:15
Your CSS is missing braces.
– Script47
Nov 14 '18 at 9:09
Your CSS is missing braces.
– Script47
Nov 14 '18 at 9:09
2
2
I wonder how this code works, without braces :o
– Viira
Nov 14 '18 at 9:10
I wonder how this code works, without braces :o
– Viira
Nov 14 '18 at 9:10
sorry, forgot to say that i'm using sass
– 8lurryface
Nov 14 '18 at 9:11
sorry, forgot to say that i'm using sass
– 8lurryface
Nov 14 '18 at 9:11
i'm a bit confused to what you are trying to do. what to you want to happen with your footer ? go up ? like to the top of the page ? or change the z-index ?
– Dirk
Nov 14 '18 at 9:14
i'm a bit confused to what you are trying to do. what to you want to happen with your footer ? go up ? like to the top of the page ? or change the z-index ?
– Dirk
Nov 14 '18 at 9:14
@לבני מלכה sAss does not use braces, sCss does
– Dirk
Nov 14 '18 at 9:15
@לבני מלכה sAss does not use braces, sCss does
– Dirk
Nov 14 '18 at 9:15
|
show 6 more comments
1 Answer
1
active
oldest
votes
2
See if this is what you've looking for. Try changing the height of the .content, the footer will always stick to the top of the content part, if there is no content in the .content part, the footer will stick to the bottom of the page.
body
width: 100vw;
margin:0;
padding:0;
.upper-body
display: flex;
width: 100%;
.footer-content
display: flex;
flex-direction: column;
position: fixed;
z-index: 10;
width: 100vw;
bottom: 0;
justify-content: space-between;
box-sizing: border-box;
flex-wrap: nowrap;
background-color: yellow;
footer
position: relative;
z-index: 10;
width: 100vw;
bottom: 0;
display: flex;
justify-content: space-between;
box-sizing: border-box;
flex-wrap: nowrap;
padding: 0 6.25vw 2.6042vw 6.35vw;
background-color: yellow;
.content
display: flex;
position: relative;
bottom: 0;
z-index: 2;
height: 6.25vw;
width: 100vw;
background-color: gray;
<div class="upper-body">
</div>
<div class="footer-content">
<footer>
<div className="social-icons">
<div className="icon">
<a href="http://fb.me">
<i className="fab fa-facebook-f"></i>
</a>
</div>
<div className="icon">
<a href="https://twitter.com/">
<i className="fab fa-twitter"></i>
</a>
</div>
<div className="icon">
<a href="https://www.linkedin.com/">
<i className="fab fa-linkedin-in"></i>
</a>
</div>
<div className="icon">
<a href="https://plus.google.com/discover">
<i className="fab fa-google-plus-g"></i>
</a>
</div>
</div>
<div class="arrow"></div>
</footer>
<div class="content">
</div>
</div>answered Nov 14 '18 at 10:28
SaniraSanira
12519
awesome, this solves my problem. thanks a lot for help!
– 8lurryface
Nov 14 '18 at 10:36
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%2f53296476%2fmake-footer-move-up-when-content-appears-at-the-bottom%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
2
See if this is what you've looking for. Try changing the height of the .content, the footer will always stick to the top of the content part, if there is no content in the .content part, the footer will stick to the bottom of the page.
body
width: 100vw;
margin:0;
padding:0;
.upper-body
display: flex;
width: 100%;
.footer-content
display: flex;
flex-direction: column;
position: fixed;
z-index: 10;
width: 100vw;
bottom: 0;
justify-content: space-between;
box-sizing: border-box;
flex-wrap: nowrap;
background-color: yellow;
footer
position: relative;
z-index: 10;
width: 100vw;
bottom: 0;
display: flex;
justify-content: space-between;
box-sizing: border-box;
flex-wrap: nowrap;
padding: 0 6.25vw 2.6042vw 6.35vw;
background-color: yellow;
.content
display: flex;
position: relative;
bottom: 0;
z-index: 2;
height: 6.25vw;
width: 100vw;
background-color: gray;
<div class="upper-body">
</div>
<div class="footer-content">
<footer>
<div className="social-icons">
<div className="icon">
<a href="http://fb.me">
<i className="fab fa-facebook-f"></i>
</a>
</div>
<div className="icon">
<a href="https://twitter.com/">
<i className="fab fa-twitter"></i>
</a>
</div>
<div className="icon">
<a href="https://www.linkedin.com/">
<i className="fab fa-linkedin-in"></i>
</a>
</div>
<div className="icon">
<a href="https://plus.google.com/discover">
<i className="fab fa-google-plus-g"></i>
</a>
</div>
</div>
<div class="arrow"></div>
</footer>
<div class="content">
</div>
</div>answered Nov 14 '18 at 10:28
SaniraSanira
12519
awesome, this solves my problem. thanks a lot for help!
– 8lurryface
Nov 14 '18 at 10:36
add a comment |
2
See if this is what you've looking for. Try changing the height of the .content, the footer will always stick to the top of the content part, if there is no content in the .content part, the footer will stick to the bottom of the page.
body
width: 100vw;
margin:0;
padding:0;
.upper-body
display: flex;
width: 100%;
.footer-content
display: flex;
flex-direction: column;
position: fixed;
z-index: 10;
width: 100vw;
bottom: 0;
justify-content: space-between;
box-sizing: border-box;
flex-wrap: nowrap;
background-color: yellow;
footer
position: relative;
z-index: 10;
width: 100vw;
bottom: 0;
display: flex;
justify-content: space-between;
box-sizing: border-box;
flex-wrap: nowrap;
padding: 0 6.25vw 2.6042vw 6.35vw;
background-color: yellow;
.content
display: flex;
position: relative;
bottom: 0;
z-index: 2;
height: 6.25vw;
width: 100vw;
background-color: gray;
<div class="upper-body">
</div>
<div class="footer-content">
<footer>
<div className="social-icons">
<div className="icon">
<a href="http://fb.me">
<i className="fab fa-facebook-f"></i>
</a>
</div>
<div className="icon">
<a href="https://twitter.com/">
<i className="fab fa-twitter"></i>
</a>
</div>
<div className="icon">
<a href="https://www.linkedin.com/">
<i className="fab fa-linkedin-in"></i>
</a>
</div>
<div className="icon">
<a href="https://plus.google.com/discover">
<i className="fab fa-google-plus-g"></i>
</a>
</div>
</div>
<div class="arrow"></div>
</footer>
<div class="content">
</div>
</div>answered Nov 14 '18 at 10:28
SaniraSanira
12519
awesome, this solves my problem. thanks a lot for help!
– 8lurryface
Nov 14 '18 at 10:36
add a comment |
2
2
2
See if this is what you've looking for. Try changing the height of the .content, the footer will always stick to the top of the content part, if there is no content in the .content part, the footer will stick to the bottom of the page.
body
width: 100vw;
margin:0;
padding:0;
.upper-body
display: flex;
width: 100%;
.footer-content
display: flex;
flex-direction: column;
position: fixed;
z-index: 10;
width: 100vw;
bottom: 0;
justify-content: space-between;
box-sizing: border-box;
flex-wrap: nowrap;
background-color: yellow;
footer
position: relative;
z-index: 10;
width: 100vw;
bottom: 0;
display: flex;
justify-content: space-between;
box-sizing: border-box;
flex-wrap: nowrap;
padding: 0 6.25vw 2.6042vw 6.35vw;
background-color: yellow;
.content
display: flex;
position: relative;
bottom: 0;
z-index: 2;
height: 6.25vw;
width: 100vw;
background-color: gray;
<div class="upper-body">
</div>
<div class="footer-content">
<footer>
<div className="social-icons">
<div className="icon">
<a href="http://fb.me">
<i className="fab fa-facebook-f"></i>
</a>
</div>
<div className="icon">
<a href="https://twitter.com/">
<i className="fab fa-twitter"></i>
</a>
</div>
<div className="icon">
<a href="https://www.linkedin.com/">
<i className="fab fa-linkedin-in"></i>
</a>
</div>
<div className="icon">
<a href="https://plus.google.com/discover">
<i className="fab fa-google-plus-g"></i>
</a>
</div>
</div>
<div class="arrow"></div>
</footer>
<div class="content">
</div>
</div>answered Nov 14 '18 at 10:28
SaniraSanira
12519
See if this is what you've looking for. Try changing the height of the .content, the footer will always stick to the top of the content part, if there is no content in the .content part, the footer will stick to the bottom of the page.
body
width: 100vw;
margin:0;
padding:0;
.upper-body
display: flex;
width: 100%;
.footer-content
display: flex;
flex-direction: column;
position: fixed;
z-index: 10;
width: 100vw;
bottom: 0;
justify-content: space-between;
box-sizing: border-box;
flex-wrap: nowrap;
background-color: yellow;
footer
position: relative;
z-index: 10;
width: 100vw;
bottom: 0;
display: flex;
justify-content: space-between;
box-sizing: border-box;
flex-wrap: nowrap;
padding: 0 6.25vw 2.6042vw 6.35vw;
background-color: yellow;
.content
display: flex;
position: relative;
bottom: 0;
z-index: 2;
height: 6.25vw;
width: 100vw;
background-color: gray;
<div class="upper-body">
</div>
<div class="footer-content">
<footer>
<div className="social-icons">
<div className="icon">
<a href="http://fb.me">
<i className="fab fa-facebook-f"></i>
</a>
</div>
<div className="icon">
<a href="https://twitter.com/">
<i className="fab fa-twitter"></i>
</a>
</div>
<div className="icon">
<a href="https://www.linkedin.com/">
<i className="fab fa-linkedin-in"></i>
</a>
</div>
<div className="icon">
<a href="https://plus.google.com/discover">
<i className="fab fa-google-plus-g"></i>
</a>
</div>
</div>
<div class="arrow"></div>
</footer>
<div class="content">
</div>
</div>body
width: 100vw;
margin:0;
padding:0;
.upper-body
display: flex;
width: 100%;
.footer-content
display: flex;
flex-direction: column;
position: fixed;
z-index: 10;
width: 100vw;
bottom: 0;
justify-content: space-between;
box-sizing: border-box;
flex-wrap: nowrap;
background-color: yellow;
footer
position: relative;
z-index: 10;
width: 100vw;
bottom: 0;
display: flex;
justify-content: space-between;
box-sizing: border-box;
flex-wrap: nowrap;
padding: 0 6.25vw 2.6042vw 6.35vw;
background-color: yellow;
.content
display: flex;
position: relative;
bottom: 0;
z-index: 2;
height: 6.25vw;
width: 100vw;
background-color: gray;
<div class="upper-body">
</div>
<div class="footer-content">
<footer>
<div className="social-icons">
<div className="icon">
<a href="http://fb.me">
<i className="fab fa-facebook-f"></i>
</a>
</div>
<div className="icon">
<a href="https://twitter.com/">
<i className="fab fa-twitter"></i>
</a>
</div>
<div className="icon">
<a href="https://www.linkedin.com/">
<i className="fab fa-linkedin-in"></i>
</a>
</div>
<div className="icon">
<a href="https://plus.google.com/discover">
<i className="fab fa-google-plus-g"></i>
</a>
</div>
</div>
<div class="arrow"></div>
</footer>
<div class="content">
</div>
</div>body
width: 100vw;
margin:0;
padding:0;
.upper-body
display: flex;
width: 100%;
.footer-content
display: flex;
flex-direction: column;
position: fixed;
z-index: 10;
width: 100vw;
bottom: 0;
justify-content: space-between;
box-sizing: border-box;
flex-wrap: nowrap;
background-color: yellow;
footer
position: relative;
z-index: 10;
width: 100vw;
bottom: 0;
display: flex;
justify-content: space-between;
box-sizing: border-box;
flex-wrap: nowrap;
padding: 0 6.25vw 2.6042vw 6.35vw;
background-color: yellow;
.content
display: flex;
position: relative;
bottom: 0;
z-index: 2;
height: 6.25vw;
width: 100vw;
background-color: gray;
<div class="upper-body">
</div>
<div class="footer-content">
<footer>
<div className="social-icons">
<div className="icon">
<a href="http://fb.me">
<i className="fab fa-facebook-f"></i>
</a>
</div>
<div className="icon">
<a href="https://twitter.com/">
<i className="fab fa-twitter"></i>
</a>
</div>
<div className="icon">
<a href="https://www.linkedin.com/">
<i className="fab fa-linkedin-in"></i>
</a>
</div>
<div className="icon">
<a href="https://plus.google.com/discover">
<i className="fab fa-google-plus-g"></i>
</a>
</div>
</div>
<div class="arrow"></div>
</footer>
<div class="content">
</div>
</div>answered Nov 14 '18 at 10:28
SaniraSanira
12519
answered Nov 14 '18 at 10:28
SaniraSanira
12519
answered Nov 14 '18 at 10:28
SaniraSanira
12519
answered Nov 14 '18 at 10:28
SaniraSanira
12519
12519
awesome, this solves my problem. thanks a lot for help!
– 8lurryface
Nov 14 '18 at 10:36
add a comment |
awesome, this solves my problem. thanks a lot for help!
– 8lurryface
Nov 14 '18 at 10:36
awesome, this solves my problem. thanks a lot for help!
– 8lurryface
Nov 14 '18 at 10:36
awesome, this solves my problem. thanks a lot for help!
– 8lurryface
Nov 14 '18 at 10:36
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');
);
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%2f53296476%2fmake-footer-move-up-when-content-appears-at-the-bottom%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
Your CSS is missing braces.
– Script47
Nov 14 '18 at 9:09
2
I wonder how this code works, without braces :o
– Viira
Nov 14 '18 at 9:10
sorry, forgot to say that i'm using sass
– 8lurryface
Nov 14 '18 at 9:11
i'm a bit confused to what you are trying to do. what to you want to happen with your footer ? go up ? like to the top of the page ? or change the z-index ?
– Dirk
Nov 14 '18 at 9:14
@לבני מלכה sAss does not use braces, sCss does
– Dirk
Nov 14 '18 at 9:15