1

So I have a problem with my footer: I have two pages which use specific position values and due to them being different to all the others, the footer when set to

position: absolute
bottom: 0

isn't sticking to the bottom and is buggy... for the 2 pages the footer will stick to the bottom when I use:

position: relative
    bottom: 0

so now I am asking if there is a way to change absolute to relative for the 2 specific pages?

THE FOOTER IS IN A SHARED FOLDER WHICH MEANS THAT IT IS AUTOMATICALLY PLACED INTO ALL PAGES

Pauli
  • 17
  • 5

4 Answers4

1

You can add a class to the body depending of your current page to add css in specific cases :

.footer{
    position: absolute;
    bottom: 0;
}
.login .footer, .shop .footer{
    position: relative;
}

html :

<body class="login">
    <div class="footer"></div>
</body>
Cédric
  • 2,239
  • 3
  • 10
  • 28
1

You can use inline css for that pages like this:

page1:

<div style = "position: relative; bottom:0; ">

page2:

<div style = "position: absolute; bottom:0; ">
Nensi Gondaliya
  • 67
  • 5
0
<div style = "position: absolute; bottom:0; ">

and For another tag

<div style = "position: relative; bottom:0; ">

Using Inline CSS

Rushabh Gandhi
  • 121
  • 9
0

My advice would be to, to those two specific pages add one more class which has

position: realtive; !important

this way it will override the absolute positioning the base class has.

lordsanken
  • 38
  • 11
  • You don't have to add `!important` if you are more specific. For example, if you add `.important` to the `.footer` div, `.important.footer{}`will have the priority than just `.footer{}`. – Cédric Apr 27 '22 at 12:29