Hi All,


I want my footer at the bottom of my page.

Now it is floating in the middle when there is not enough content.


However, if there is enough content and there is a scroll barr I want to see the footer only at the end of the page. (if I use fixed in my CSS, in this case, I will see the footer when I am not at the end of the screen.)


How will I do this?

Thank you.





/* footer **************************/
.Footer {
    background-color: transparent;
    font-size: 12px;
    height: 40px;
    padding: 10px 0px 0px 0px;
    text-align: center;
    top: 100%;
    width: 100%;
    position: relative;
    -servicestudio-width: 100%;
    
}

I guess your code has

position: static;

you might need 

position: relative;

coder kamath wrote:

/* footer **************************/
.Footer {
    background-color: transparent;
    font-size: 12px;
    height: 40px;
    padding: 10px 0px 0px 0px;
    text-align: center;
    top: 100%;
    width: 100%;
    position: relative;
    -servicestudio-width: 100%;
    
}

I guess your code has

position: static;

you might need 

position: relative;


This will not put my footer at the bottom of the page if there is not enough content..

Erik Brzozowski wrote:

I think the stackoverflow post describes what you are trying to do


https://stackoverflow.com/questions/643879/css-to-make-html-page-footer-stay-at-bottom-of-the-page-with-a-minimum-height-b


https://codepen.io/vsync/pen/FyluI


Yes, I foudn this earlier today and indeed it describes what I want to do but it is not working voor the CSS in Outsystems..

Hi Susan Spruit,

add this code


/* footer **************************/
.Footer {   
  width: 100%;
  position:absolute
  bottom:0;
  left:0;
  right:0;
  width:100%;
  height:100px
    
}


Solution

Kavita wrote:

Hi Susan Spruit,

add this code


/* footer **************************/
.Footer {   
  width: 100%;
  position:absolute
  bottom:0;
  left:0;
  right:0;
  width:100%;
  height:100px
    
}



Thanks for thinking with me but this won't work either in the right way.. found the solution with my colleagus:

SyntaxEditor Code Snippet

.MainContent {
    min-height: calc(100vh - 190px);
}

for the px. you need to determine what works for your layout. Is working for other screens as well..

Solution