Skip to Content (Press Enter)
2019-04-03 07-55-16
Susan Baars-Spruit
1256Views
6Comments
Solved
Floating Footer
Question

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.





1
0
21 Feb 2019
Copy Link
2019-04-03 07-55-16
Susan Baars-Spruit
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..

See solution in context
0
0
22 Feb 2019
Copy Link
2020-08-26 14-54-58
Raghuram kamath
/* 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;

0
0
21 Feb 2019
Copy Link
2019-04-03 07-55-16
Susan Baars-Spruit

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..

0
0
21 Feb 2019
Copy Link
2019-04-03 07-55-16
Susan Baars-Spruit

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..

0
0
21 Feb 2019
Copy Link
2022-01-17 05-19-27
Kavita

Hi Susan Spruit,

add this code


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


1
0
22 Feb 2019
Copy Link
2019-04-03 07-55-16
Susan Baars-Spruit
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..

0
0
22 Feb 2019
Copy Link
Community GuidelinesBe kind and respectful, give credit to the original source of content, and search for duplicates before posting.