footer does not cover the entirety of the length of the page-CodePudding

This is my first time writing in html and css, so sorry if it's confusing and dumb.

I'm trying to make that sticks to the bottom and covers the length of the page, the problem is that i tried everything i could, from padding to width:100% other thant searching online, what can i do?

I'm using angular and i have installed bootstrap, please don't hesitate to ask any question or to ask me to explain myself (i'm not a native speaker), have a nice day and thank you!

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

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

.container {
  max-width: 2270px;
  margin: 0 auto;
}

.row {
  display: flex;
  flex-wrap: wrap;
}

ul {
  list-style: none;
}

.footer {
  background-color: #24262b;
  padding: 20px 0;
}

.footer-col {
  width: 25%;
  padding: 0;
}

.footer-col h4 {
  font-size: 18px;
  color: #ffffff;
  text-transform: capitalize;
  margin-bottom: 35px;
  font-weight: 500;
  position: relative;
}

.footer-col h4::before {
  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;
}

.footer-col ul li a {
  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 {
  color: #ffffff;
  padding-left: 8px;
}

.footer-col .social-links a {
  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;
}

.siteFooterBar {
  position: fixed;
  bottom: 0;
  padding-top: 10px;
  width: 100%;
  box-shadow: 0px 0px 25px rgb(207, 207, 207);
  height: 78px;
  color: #9B9B9B;
  background: #F3F3F3;
}

.content {
  display: block;
  padding: 10px;
  margin: 0px 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;
}

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

.content img:hover {
  filter: invert(400%);
  filter: brightness(4);
  -webkit-filter: grayscale(-100);
  -webkit-transform: scale(1.10);
}


/*responsive*/

@media(max-width: 100%) {
  .footer-col {
    width: 100%;
    margin-bottom: 0px;
  }
}

@media(max-width: 100%) {
  .footer-col {
    width: 100%;
  }
}

<footer >
  <div >
    <div >
      <div >
        <div >
          <a href="#">
            <img src="https://i.imgur.com/1yvwx9I.png">
          </a>
        </div>
      </div>
      <div >
        <h4>Azienda</h4>
        <ul>
          <li><a href="#">Chi Siamo</a></li>
          <li><a href="#">Contattaci</a></li>
          <li><a href="#">Placeholder</a></li>
          <li><a href="#">PlaceHolder</a></li>
        </ul>
      </div>
      <div >
        <h4>Aiuto</h4>
        <ul>
          <li><a href="#">FAQ</a></li>
          <li><a href="#">Consegne</a></li>
          <li><a href="#">Reso</a></li>
          <li><a href="#">Informatica privacy</a></li>
        </ul>
      </div>
      <div >
        <h4>Seguici su</h4>
        <div >
          <a href="#"><i ></i></a>
          <a href="#"><i ></i></a>
          <a href="#"><i ></i></a>
          <a href="#"><i ></i></a>
        </div>
      </div>
    </div>
  </div>
</footer>

CodePudding user response：

The standard way to align a footer at the bottom of a webpage is just by setting it to position: relative;. However, this entails that there is more content that is equal to or greater than the viewport height. Hence, aligning the footer after the content and at the bottom.

If you don't have content, use position: absolute; on footer. Then you can set bottom: 0px; to get it at the bottom. Then set left and right to 0 to get it the full width. See below.

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

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

.container {
  max-width: 2270px;
  margin: 0 auto;
}

.row {
  display: flex;
  flex-wrap: wrap;
}

ul {
  list-style: none;
}


/* new */

footer {
  position: absolute;
  bottom: 0px;
  right: 0px;
  left: 0px;
}


/* end new */

.footer {
  background-color: #24262b;
  padding: 20px 0;
}

.footer-col {
  width: 25%;
  padding: 0;
}

.footer-col h4 {
  font-size: 18px;
  color: #ffffff;
  text-transform: capitalize;
  margin-bottom: 35px;
  font-weight: 500;
  position: relative;
}

.footer-col h4::before {
  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;
}

.footer-col ul li a {
  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 {
  color: #ffffff;
  padding-left: 8px;
}

.footer-col .social-links a {
  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;
}

.siteFooterBar {
  position: fixed;
  bottom: 0;
  padding-top: 10px;
  width: 100%;
  box-shadow: 0px 0px 25px rgb(207, 207, 207);
  height: 78px;
  color: #9B9B9B;
  background: #F3F3F3;
}

.content {
  display: block;
  padding: 10px;
  margin: 0px 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;
}

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

.content img:hover {
  filter: invert(400%);
  filter: brightness(4);
  -webkit-filter: grayscale(-100);
  -webkit-transform: scale(1.10);
}


/*responsive*/

@media(max-width: 100%) {
  .footer-col {
    width: 100%;
    margin-bottom: 0px;
  }
}

@media(max-width: 100%) {
  .footer-col {
    width: 100%;
  }
}

<main>
  fooo
</main>

<footer >
  <div >
    <div >
      <div >
        <div >
          <a href="#">
            <img src="https://i.imgur.com/1yvwx9I.png">
          </a>
        </div>
      </div>
      <div >
        <h4>Azienda</h4>
        <ul>
          <li><a href="#">Chi Siamo</a></li>
          <li><a href="#">Contattaci</a></li>
          <li><a href="#">Placeholder</a></li>
          <li><a href="#">PlaceHolder</a></li>
        </ul>
      </div>
      <div >
        <h4>Aiuto</h4>
        <ul>
          <li><a href="#">FAQ</a></li>
          <li><a href="#">Consegne</a></li>
          <li><a href="#">Reso</a></li>
          <li><a href="#">Informatica privacy</a></li>
        </ul>
      </div>
      <div >
        <h4>Seguici su</h4>
        <div >
          <a href="#"><i ></i></a>
          <a href="#"><i ></i></a>
          <a href="#"><i ></i></a>
          <a href="#"><i ></i></a>
        </div>
      </div>
    </div>
  </div>
</footer>