Footer does not remain at the bottom of the page and if it does, it doesn't work properly

Question

as the Title says, i have a problem with my footer.

my footer doesn't stick to the bottom if my page has almost no content and if i add some, it passes right through it (see photo), i already tried:

position:absolute;
bottom: 0;
flexbox (even tho i might be coding it the wrong way, i'm new in web development)

HTML code

<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="utf-8">
  <meta name="viewport" content="width=device-width, initial-scale=1">
  <link rel="stylesheet" href="/src/app/footer/footer.component.css"> <!--import css footer-->
  <link rel="stylesheet" type="text/css" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/5.15.1/css/all.min.css">
</head>
<body>
<!--parte footer dell'html-->

  <footer class="footer">
    <div class="flex-wrapper">
     <div class="container">
        <div class="row">
            <div class="footer-col">
                <div class="content"> 
                    <a href="#"> <!--i link da collegare vanno dove sono presenti gli #-->
                    <img src="https://i.imgur.com/1yvwx9I.png" >
                    </a>
                </div>
            </div>
            <div class="footer-col">
                <h4>Azienda</h4> <!--titolo-->
                <ul>
                    <li><a href="chi-siamo">Chi Siamo</a></li> <!--elenco degli elementi-->
                    <li><a href="contatti">Contattaci</a></li>
                    <li><a href="#">Placeholder</a></li>
                    <li><a href="#">PlaceHolder</a></li>
                </ul>
            </div>
            <div class="footer-col">
                <h4>Aiuto</h4>
                <ul>
                    <li><a href="faq">FAQ</a></li>
                    <li><a href="consegne">Consegne</a></li>
                    <li><a href="reso">Reso</a></li>
                    <li><a href="privacy">Informatica privacy</a></li>
                </ul>
            </div>
            <div class="footer-col">
                <h4>Seguici su</h4>
                <div class="social-links">
                    <a href="facebook"><i class="fab fa-facebook-f"></i></a> <!--icone dei social-->
                    <a href="twitter"><i class="fab fa-twitter"></i></a>
                    <a href="instagram"><i class="fab fa-instagram"></i></a>
                    <a href="linkedin"><i class="fab fa-linkedin-in"></i></a>
                </div>
            </div>
        </div>
     </div>
    </div>
  </footer>

</body>
</html>

CSS code

@import url('https://fonts.googleapis.com/css2?family=Poppins:wght@300;400;500;600;700&display=swap');
body  {
  /* fonto e grandezza font*/
  line-height: 1;
  font-family: 'Poppins', sans-serif;
}

* {
  margin: 0;
  padding: 0;
  box-sizing: border-box;
}

.container {
  width: 100%;
  margin: 0 auto;
}

.row {
  /*si occupa delle righe, accomoda lo spostamento dell'elenco con il dimensionamento della pagina */
  display: flex;
  flex-wrap: wrap;
}

ul {
  list-style: none;
}

.footer {
  /* solamente il colore di background del footer e lo spazio tra gli elementi */
  background-color: #24262b;
  padding: 20px 0;
}

.footer-col {
  /* si occupa delle colonne e del loro ridimensionamento */
  width: 25%;
  padding: 0;
}

.footer-col h4 {
  /*stabilisco la grandezza del font e del colore dei titoli */
  font-size: 25px;
  color: #ffffff;
  text-transform: capitalize;
  margin-bottom: 35px;
  font-weight: 500;
  position: relative;
}

.footer-col h4::before {
  /* barra rossa sotto ai titoli */
  content: '';
  position: absolute;
  left: 0;
  bottom: -10px;
  background-color: #e91e63;
  height: 2px;
  box-sizing: border-box;
  width: 50px;
}

.footer-col ul li:not(:last-child) {
  margin-bottom: 10px; /* spazio tra le scritte in verticale */
}

.footer-col ul li a {
  /* stato degli elementi dell'elenco pre-hover, potete notare che dispongo qui "transition" cioè il tempo che ci metterà a passare allo stato dell'hover dal suo stato normale e viceversa */
  font-size: 16px;
  text-transform: capitalize;
  color: #ffffff;
  text-decoration: none;
  font-weight: 300;
  color: #bbbbbb;
  display: block;
  transition: all 0.3s ease;
}

.footer-col ul li a:hover {
  /* colore e leggero spostamento quando avviene l'hover (cioè quando ci passa sopra il mouse) */
  color: #ffffff;
  padding-left: 8px;
}

.footer-col .social-links a {
  /* stesso meccaniscmo dei font, qui però inserisco il background-color per il cambiamento del color  (color -> background-color)*/
  display: inline-block;
  height: 40px;
  width: 40px;
  background-color: rgba(255, 255, 255, 0.2);
  margin: 0 10px 10px 0;
  text-align: center;
  line-height: 40px;
  border-radius: 50%;
  color: #ffffff;
  transition: all 0.5s ease;
}

.footer-col .social-links a:hover {
  color: #24262b;
  background-color: #ffffff;
}


.content {
  display: block;
  padding: 10px;
  margin: 15px auto;
  text-align: center;
  font: 25px Georgia, "Times New Roman", Times, serif;
  font-size: 14px;
  width: 300px;
  display: flex;
}

.foot {
  display: inline;
  line-height: 70px;
}

/* dove si trova il logo, lo inizializzo con un filtro grigio e una transizione di 0.6, uso webkit per la scala di grigio (e anche la transizione solo per webkit), la scala di grigio viene usata perché rende il contrasto con l'hover molto più bello */
.content img {
  height: 150px;
  width: 150px;
  float: left;
  filter: grayscale(100%);
  -webkit-filter: grayscale(100%);
  -webkit-transition: all .6s ease-in-out;
  transition: 0.6s;
}
/* hover del logo */
.content img:hover {
  filter: invert(400%);
  filter: brightness(4);
  -webkit-filter: grayscale(-100);
  -webkit-transform: scale(1.10);
}


/* tiene il footer esteso evitando gli spazi sui lati */
footer {
  position: absolute;
  /* temporaneo, di solito 0px o togli */
  right: 0px;
  left: 0px;
}

(i don't know if it can help, but i'm using Angular)

This is what i was talking when i said "passing through" (it happens when i use bottom:0;)

the error

If i need to be more specific with what i need, i'm trying to create a footer that takes all the length of the page and stays at the bottom, push itself down if more text is added, hope it helps

EDIT

this is the code that i have now:

HTML

<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="utf-8">
  <meta name="viewport" content="width=device-width, initial-scale=1">
  <link rel="stylesheet" href="/src/app/footer/footer.component.css"> <!--import css footer-->
  <link rel="stylesheet" type="text/css" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/5.15.1/css/all.min.css">
</head>
<body>
<!--parte footer dell'html-->
<!--parte footer dell'html-->
<div class="content">
    <div>
      <h1>Heelo</h1>
      <h1>Heelo</h1>
      <h1>Heelo</h1>
      <h1>Heelo</h1>
      <h1>Heelo</h1>
    </div>
    <div>
      <h1>Heelo</h1>
      <h1>Heelo</h1>
      <h1>Heelo</h1>
      <h1>Heelo</h1>
      <h1>Heelo</h1>
    </div>
    <div>
      <h1>Heelo</h1>
      <h1>Heelo</h1>
      <h1>Heelo</h1>
      <h1>Heelo</h1>
      <h1>Heelo</h1>
    </div>
    <div>
      <h1>Heelo</h1>
      <h1>Heelo</h1>
      <h1>Heelo</h1>
      <h1>Heelo</h1>
      <h1>Heelo</h1>
    </div>
  </div>

  <footer class="footer">
    <div class="flex-wrapper">
     <div class="container">
        <div class="row">
            <div class="footer-col">
                <div class="content"> 
                    <a href="#"> <!--i link da collegare vanno dove sono presenti gli #-->
                    <img src="https://i.imgur.com/1yvwx9I.png" >
                    </a>
                </div>
            </div>
            <div class="footer-col">
                <h4>Azienda</h4> <!--titolo-->
                <ul>
                    <li><a href="chi-siamo">Chi Siamo</a></li> <!--elenco degli elementi-->
                    <li><a href="contatti">Contattaci</a></li>
                    <li><a href="#">Placeholder</a></li>
                    <li><a href="#">PlaceHolder</a></li>
                </ul>
            </div>
            <div class="footer-col">
                <h4>Aiuto</h4>
                <ul>
                    <li><a href="faq">FAQ</a></li>
                    <li><a href="consegne">Consegne</a></li>
                    <li><a href="reso">Reso</a></li>
                    <li><a href="privacy">Informatica privacy</a></li>
                </ul>
            </div>
            <div class="footer-col">
                <h4>Seguici su</h4>
                <div class="social-links">
                    <a href="facebook"><i class="fab fa-facebook-f"></i></a> <!--icone dei social-->
                    <a href="twitter"><i class="fab fa-twitter"></i></a>
                    <a href="instagram"><i class="fab fa-instagram"></i></a>
                    <a href="linkedin"><i class="fab fa-linkedin-in"></i></a>
                </div>
            </div>
        </div>
     </div>
    </div>
  </footer>

</body>
</html>

CSS

@import url('https://fonts.googleapis.com/css2?family=Poppins:wght@300;400;500;600;700&display=swap');

body  {
  /* fonto e grandezza font*/
  line-height: 1;
  font-family: 'Poppins', sans-serif;
}

* {
  margin: 0;
  padding: 0;
  box-sizing: border-box;
}

/* tiene il footer esteso evitando gli spazi sui lati */
html, body {
  height: 100%;
}

body {
  display: flex;
  flex-direction: column;
}

.content {
/*   flex: 1 0 auto; */
  flex-direction: column;
}

.footer {
  flex-shrink: 0;
}

.container {
  width: 100%;
  margin: 0 auto;

}

.row {
  /*si occupa delle righe, accomoda lo spostamento dell'elenco con il dimensionamento della pagina */
  display: flex;
  flex-wrap: wrap;
}

ul {
  list-style: none;
}

.footer {
  /* solamente il colore di background del footer e lo spazio tra gli elementi */
  background-color: #24262b;
  padding: 20px 0;
}

.footer-col {
  /* si occupa delle colonne e del loro ridimensionamento */
  width: 25%;
  padding: 0;
}

.footer-col h4 {
  /*stabilisco la grandezza del font e del colore dei titoli */
  font-size: 25px;
  color: #ffffff;
  text-transform: capitalize;
  margin-bottom: 35px;
  font-weight: 500;
  position: relative;
}

.footer-col h4::before {
  /* barra rossa sotto ai titoli */
  content: '';
  position: absolute;
  left: 0;
  bottom: -10px;
  background-color: #e91e63;
  height: 2px;
  box-sizing: border-box;
  width: 50px;
}

.footer-col ul li:not(:last-child) {
  margin-bottom: 10px; /* spazio tra le scritte in verticale */
}

.footer-col ul li a {
  /* stato degli elementi dell'elenco pre-hover, potete notare che dispongo qui "transition" cioè il tempo che ci metterà a passare allo stato dell'hover dal suo stato normale e viceversa */
  font-size: 16px;
  text-transform: capitalize;
  color: #ffffff;
  text-decoration: none;
  font-weight: 300;
  color: #bbbbbb;
  display: block;
  transition: all 0.3s ease;
}

.footer-col ul li a:hover {
  /* colore e leggero spostamento quando avviene l'hover (cioè quando ci passa sopra il mouse) */
  color: #ffffff;
  padding-left: 8px;
}

.footer-col .social-links a {
  /* stesso meccaniscmo dei font, qui però inserisco il background-color per il cambiamento del color  (color -> background-color)*/
  display: inline-block;
  height: 40px;
  width: 40px;
  background-color: rgba(255, 255, 255, 0.2);
  margin: 0 10px 10px 0;
  text-align: center;
  line-height: 40px;
  border-radius: 50%;
  color: #ffffff;
  transition: all 0.5s ease;
}

.footer-col .social-links a:hover {
  color: #24262b;
  background-color: #ffffff;
}


.content {

  display: block;
  padding: 10px;
  margin: 15px auto;
  text-align: center;
  font: 25px Georgia, "Times New Roman", Times, serif;
  font-size: 14px;
  width: 300px;
  display: flex;
  
}

.foot {
  display: inline;
  line-height: 70px;
}

/* dove si trova il logo, lo inizializzo con un filtro grigio e una transizione di 0.6, uso webkit per la scala di grigio (e anche la transizione solo per webkit), la scala di grigio viene usata perché rende il contrasto con l'hover molto più bello */
.content img {
  height: 150px;
  width: 150px;
  float: left;
  filter: grayscale(100%);
  -webkit-filter: grayscale(100%);
  -webkit-transition: all .6s ease-in-out;
  transition: 0.6s;
}
/* hover del logo */
.content img:hover {
  filter: invert(400%);
  filter: brightness(4);
  -webkit-filter: grayscale(-100);
  -webkit-transform: scale(1.10);
}

Image to explain the last remaining problem

problem

Try to put position: relative to the body then the footer width: 100% and positon: absolute it should work like that you can make before the footer section with height of 100vh to check if the code work like that — Mohamad, Jul 21 '22 at 12:33
i did it! now i just have the problem that my footer is not as long as the entire page — Lorenzo Pompei, Jul 21 '22 at 13:37
can you pplease explain more what you need or if you have an image about what you need — Mohamad, Jul 21 '22 at 14:47
@Mohamad i modified the post you can find everything there thank you very much — Lorenzo Pompei, Jul 21 '22 at 14:53

Footer does not remain at the bottom of the page and if it does, it doesn't work properly

0 Answers0