Footer (How to show the footer stick to the bottom (even when the console is opened)
I added the position: fixed and bottom : 0 but then the footer stick to the bottom, but when I open the console, the footer shows on the top of the content - would the better option be adding margin-top or any other suggestions?
If I open the console. the content scrolls but the footer shows on the top of the content
23 Replies
if I try using margin-top property for footer set to some value, the content is not always fixed its varies so the height varies and the footer shows at the middle of the page and sometimes at bottom adding too much space above the content.
can you provide a codepen exmaple of the issue
Are you wanting the footer to always be at the bottom even when you scroll?
Or do you just need it to be at the bottom when content does not push it to the bottom? https://codepen.io/b1mind/pen/PojdyQz
I prefer the grid method as you get full control from the parent.
Are you wanting the footer to always be at the bottom even when you scroll?
Or do you just need it to be at the bottom when content does not push it to the bottom , I need both the cases
I have header and then buttons and then 4 sections (section content loads based on the api response) and then footer- the response can be long or short sometimes irrespective of that footer stick to the bottom
So like in my example I gave you or no?
You need it fixed and visible always at the bottom? again helps for you to provide a codepen or example, otherwise we can only guess and not well xD
Yes, your codepen example But the content is not that small, and it varies based on the response.
You need it fixed and visible always at the bottom? - yes
again provide an example of your issue
nothing we can really do without it.
Ok, trying to create one now.
It would similiar to yours but with slight difference will do it in 5 mins
You didn't add your issue though?
I don't see where you added my solution either xD
Few issues though first off, I wouldn't style the body. Body cannot be a % height without html having a height: 100%. (all % works this way its based on its parents height but html works off document view)
Ok, The idea here was , when its loading the footer shows just below and then once content loads it pushes to bottom. Thats the issue.
The footer had to always stick to the bottom.
ok but not fixed then?
Your solution is to apply grid?
like if you scroll do you want the footer to stay ontop of the content
or just always be on the bottom of the content
yes either solution in my codepen I linked above, but I do prefer the grid one more.
Yes should be always bottom of the content.
It shouldnt be something like this
this is the issue I am facing when opening console. upon applying the position: fixed and bottom: 0 for the footer
ok but then* fixed is not it xD
unless you want it to work like that
cause that is how it should work is the screenshot you show
fixed bottom will always be at the bottom of the screen and will sit ontop of anything else.
Ok, Yeah so I will try the grid option then and will see if that works, I want the footer stick to the bottom of the content, Not above all the elements.
Even if the content is loading, it had to stick at the very end always.
Hi, That didn't work out in my case (actual project), But I applied the grid in the codepen it works. https://codepen.io/Lohitha-Yalavarthi/pen/XWGxyWp
But I got idea based on the example you provided, on what needs to be done, will try some other things. thanks
Yea without seeing the full project wouldn't know where to debug. If you are using 100% trick you do have to kinda pass it down from parent to child, grid helps as it will by default want to fill the parent grid.
Other option is to break out of the parent with
svh/lvhI didn`t get the second option, but the above functionality is actually in the sidedrawer.
that worked in the real project as well, I tried passing from the parent
But I have quick question when there is also footer why grid-template-rows: auto 1fr;?
it is actully 3 rows right?
yes but the default is
auto
if you read my notes in the codepen it says you could be more descriptive
grid-template-rows: auto 1fr auto; works too
cause again its going to default back to auto soon as a new row is added
would work the same way if you changed the grid-auto-flow: column;
then each added column would get a autoOk thanks