Need help on footer class css

HTML-CSS
1 
footer {
  position: relative; 
  left: 0;
  bottom: 0;
  padding-bottom: 10px;
  width: 100%;
  color: white;
  text-align: center;
}

Here is my codepen link: https://codepen.io/michelangelo128/pen/pLrMLg

When i changed the position to ‘fixed’ the footer overlaps over the content on the body when viewed on mobile screens. Like this, Any solution??

Overlap
Overlap357×540 134 KB

2

This is just how position: fixed works.

But if you want the main part of your page (without the footer) to be pushed up by the footer, you should wrap it in a div or main element and set its height in css to calc(100vh - footer height) or use javascript to calculate its height dynamicly:

function mainHeightCalc(){
  document.querySelector("main").style.height = $("window").height() - $("footer").outerHeight()
}

$("window").on("load resize", mainHeightCalc)
3

Thanks for your response.

I tried it doesn’t work!! and it still looks like the same. What to do?

4

Another solution that comes to mind is to define all css values as relative (percentage or viewport). For instance your footer could take up 15vh, the header 25vh and the main section 60vh. Then you could use percentage values to assign hights to segments inside the main section

1 Like
5

Thanks. Will try to assign css values in percentage and notify you.