How to make footer stick to the bottom of the page and not cover the content - Html

ChesouyeCoye
April 5, 2023
161 views
2 votes
3 Answers

I am creating a contact page. I have a fixed footer, however I do not want it to cover the contact form and map. I would like the page scrolled to see the footer at the bottom of the page. Please help.

I have tried several tutorials including the one with min height and margin-top which did not work. I really need some help.

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

h1 {
  color: #333;
  font-family: Arial, Helvetica, sans-serif;
}

header {
  position: fixed;
  background: #3a8ace;
  top: 0;
  left: 0;
  width: 100%;
  display: flex;
  justify-content: space-between;
  align-items: center;
  transition: 0.6s;
  padding: 20px 50px;
}

header .name {
  position: relative;
  font-weight: 800;
  color: #333;
  text-decoration: none;
  font-size: 2em;
  text-transform: uppercase;
  align-items: center;
}

header .navbar ul {
  position: relative;
  display: flex;
  justify-content: center;
  align-items: center;
  list-style: none;
}

header .navbar ul li {
  position: relative;
  float: left;
}

header .navbar ul li a {
  position: relative;
  margin: 0 15px;
  text-decoration: none;
  font-size: 18px;
  padding: 5px;
  color: #333;
  display: block;
}

.active,
.a:hover {
  background-color: #666;
  color: white;
}

header .navbar ul li a:hover {
  background: #333;
  color: #fff;
}

header .navbar ul li ul {
  /*     position: absolute; */
  left: 0;
  width: 200px;
  background: #fff;
}

#menu-bar {
  display: none;
}

header label {
  font-size: 20px;
  color: #333;
  cursor: pointer;
  display: none;
}

h1 {
  color: #333;
}

.topic {
  margin: auto;
  width: 60%;
  padding: 10px;
  text-align: center;
}

@media only screen and (max-width: 620px) {
  /* For mobile phones: */
  .menu,
  .main,
  .right {
    width: 100%;
  }
  @media (max-width: 991px) {
    main {
      margin-top: 80px;
    }
    header {
      padding: 30px;
    }
    header label {
      display: initial;
    }
    header .navbar {
      position: absolute;
      top: 100%;
      left: 0;
      right: 0;
      background: #fff;
      border-top: 1 px solid rgba(0, 0, 0, 0.1);
    }
    header .navbar ul li {
      width: 100%;
    }
    header .navbar ul li ul {
      position: relative;
      width: 100%;
    }
    #menu-bar:checked~.navbar {
      display: initial;
    }
  }
}

body {
  width: 100%;
  height: 150vh;
  display: grid;
  align-items: center;
  margin-top: auto 0;
  margin-bottom: auto 0;
  background: #F6F6F6;
  font-family: 'Poppins', sans-serif;
}

.contact-in {
  width: 80%;
  height: auto;
  margin: auto;
  display: flex;
  flex-wrap: wrap;
  padding: 10px;
  border-radius: 10px;
  background: #fff;
  box-shadow: 0px 0px 10px 0px #666;
}

.contact-map {
  width: 100%;
  height: auto;
  flex: 50%;
}

.contact-map iframe {
  width: 100%;
  height: 100%;
}

.contact-form {
  width: 100%;
  height: auto;
  flex: 50%;
  text-align: center;
}

.contact-form h1 {
  margin-bottom: 10px;
}

.contact-form-txt {
  width: 100%;
  height: 40px;
  color: #000;
  border: 1px solid #bcbcbc;
  border-radius: 50px;
  outline: none;
  margin-bottom: 20px;
  padding: 15px;
}

.contact-form-txt::placeholder {
  color: #aaa;
}

.contact-form-textarea {
  width: 100%;
  height: 130px;
  color: #000;
  border: 1px solid #bcbcbc;
  border-radius: 10px;
  outline: none;
  margin-bottom: 20px;
  padding: 15px;
  font-family: 'Poppins', sans-serif;
}

.contact-form-textarea::placeholder {
  color: #aaa;
}

.contact-form-btn {
  width: 100%;
  border: none;
  outline: none;
  border-radius: 50px;
  background: #3a8ace;
  color: #fff;
  text-transform: uppercase;
  padding: 10px 0;
  cursor: pointer;
  font-size: 18px;
}

footer {
  width: 100%;
  position: fixed;
  bottom: 0;
  left: 0;
  background: #111;
}

footer .content {
  max-width: 1350px;
  margin: auto;
  padding: 20px;
  display: flex;
  flex-wrap: wrap;
  justify-content: space-between;
}

footer .content p,
a {
  color: #fff;
}

footer .content .box {
  width: 33%;
  transition: all 0.4s ease;
}

footer .content .topic {
  font-size: 22px;
  font-weight: 600;
  color: #fff;
  margin-bottom: 16px;
}

footer .content p {
  text-align: justify;
}

footer .content .lower .topic {
  margin: 24px 0 5px 0;
}

footer .content .lower i {
  padding-right: 16px;
}

footer .content .middle {
  padding-left: 80px;
}

footer .content .middle a {
  line-height: 32px;
}

footer .content .right input[type="text"] {
  height: 45px;
  width: 100%;
  outline: none;
  color: #d9d9d9;
  background: #000;
  border-radius: 5px;
  padding-left: 10px;
  font-size: 17px;
  border: 2px solid #222222;
}

footer .content .right input[type="submit"] {
  height: 42px;
  width: 100%;
  font-size: 18px;
  color: #d9d9d9;
  background: #eb2f06;
  outline: none;
  border-radius: 5px;
  letter-spacing: 1px;
  cursor: pointer;
  margin-top: 12px;
  border: 2px solid #eb2f06;
  transition: all 0.3s ease-in-out;
}

.content .right input[type="submit"]:hover {
  background: none;
  color: #eb2f06;
}

footer .content .media-icons a {
  font-size: 16px;
  height: 45px;
  width: 45px;
  display: inline-block;
  text-align: center;
  line-height: 43px;
  border-radius: 5px;
  border: 2px solid #222222;
  margin: 30px 5px 0 0;
  transition: all 0.3s ease;
}

.content .media-icons a:hover {
  border-color: #eb2f06;
}

footer .bottom {
  width: 100%;
  text-align: right;
  color: #d9d9d9;
  padding: 0 40px 5px 0;
}

footer .bottom a {
  color: #eb2f06;
}

footer a {
  transition: all 0.3s ease;
}

footer a:hover {
  color: #eb2f06;
}

@media (max-width:1100px) {
  footer .content .middle {
    padding-left: 50px;
  }
}

@media (max-width:950px) {
  footer .content .box {
    width: 50%;
  }
  .content .right {
    margin-top: 40px;
  }
}

@media (max-width:560px) {
  footer {
    position: relative;
  }
  footer .content .box {
    width: 100%;
    margin-top: 30px;
  }
  footer .content .middle {
    padding-left: 0;
  }
}

<!DOCTYPE html>
<html>

<head>
  <meta charset="utf-8">
  <meta name="viewport" content="width=device-width, initial-scale=1, minimum-scale=1, maximum-scale=1, user-scalable=no">
  <title> Contact Us </title>
  <link rel="stylesheet" href="contact.css">
  <link rel="preconnect" href="https://fonts.googleapis.com">
  <link rel="preconnect" href="https://fonts.gstatic.com" crossorigin>
  <link href="https://fonts.googleapis.com/css2?family=Poppins:ital,wght@0,100;0,200;0,300;0,400;0,500;0,600;0,700;0,800;0,900;1,100;1,200;1,300;1,400;1,500;1,600;1,700;1,800;1,900&display=swap" rel="stylesheet">
</head>

<body>
  <header>
    <a href="https://ecj.com.jm/"> <img src="img/ecjLogo.png" id="logo"> </a>
    <center>
      <div class="name"> ECJ </div>
    </center>
    <input type="checkbox" id="menu-bar">
    <label fr="menu-bar">Menu</label>
    <nav class="navbar">
      <ul>
        <li> <a href="index.html">Application</a></li>
        <li> <a href="help.html"> Help </a></li>
        <li> <a href="https://ecj.com.jm/about-the-ecj/about/"> About </a></li>
        <li> <a href="contact.html" active> Contact Us </a></li>
      </ul>
    </nav>
  </header>
  <div class="contact-in">
    <div class="contact-map">
      <iframe src="https://www.google.com/maps/embed?pb=!1m18!1m12!1m3!1d948.8047317660009!2d-76.78757370737829!3d17.968548688002155!2m3!1f0!2f0!3f0!3m2!1i1024!2i768!4f13.1!3m3!1m2!1s0x8edb41467940d125%3A0x3c0567402b03262b!2sElectoral%20Office%20of%20Jamaica!5e0!3m2!1sen!2sjm!4v1679605097317!5m2!1sen!2sjm"
        width="100%" height="auto" style="border:0;" allowfullscreen="" loading="lazy" referrerpolicy="no-referrer-when-downgrade"></iframe>
    </div>

    <div class="contact-form">
      <h1> Contact Us</h1>
      <h3>Address:</h3>
      <p>GIS Department, <br> Electoral Office of Jamaica, <br> 43 Duke Street, Kingston, Jamaica</p> <br>
      <p>Tel: (876)-922-0425-9</p>
      <p>Toll-Free: 1-888-991-VOTE(8683)</p>
      <p>Fax: (876)-922-4058</p><br>
      <p>Email: [email protected]</p>
      <br>
      <form action="mailto:[email protected]" method="get" enctype="text/plain">
        Subject: <br>
        <input type="text" name="subject" placeholder="Your Full Name" class="contact-form-txt" required> <br> Email: <br>
        <input type="email" name="email" placeholder="Work Email" class="contact-form-txt" required><br> Message:
        <br>
        <textarea id="Message" name="Message" class="contact-form-textarea" rows="6" maxlength="3000" required cols="30" placeholder="Your Message"></textarea><br>
        <input type="submit" class="contact-form-btn" value="Send">
      </form>
    </div>
  </div>
  <br>
  <br>
  <br>
  <footer>
    <div class="content">
      <div class="left box">
        <div class="upper">
          <div class="topic">About us</div>
          <p>CodingLab is a channel where you can learn HTML, CSS, and also JavaScript along with creative CSS Animations and Effects.</p>
        </div>
        <div class="lower">
          <div class="topic">Contact us</div>
          <div class="phone">
            <a href="#"><i class="fas fa-phone-volume"></i>+007 9089 6767</a>
          </div>
          <div class="email">
            <a href="#"><i class="fas fa-envelope"></i>[email protected]</a>
          </div>
        </div>
      </div>
      <div class="middle box">
        <div class="topic">Our Services</div>
        <div><a href="#">Web Design, Development</a></div>
        <div><a href="#">Web UX Design, Reasearch</a></div>
        <div><a href="#">Web User Interface Design</a></div>
        <div><a href="#">Theme Development, Design</a></div>
        <div><a href="#">Mobile Application Design</a></div>
        <div><a href="#">Wire raming & Prototyping</a></div>
      </div>
      <div class="right box">
        <div class="topic">Subscribe us</div>
        <form action="#">
          <input type="text" placeholder="Enter email address">
          <input type="submit" name="" value="Send">
          <div class="media-icons">
            <a href="#"><i class="fab fa-facebook-f"></i></a>
            <a href="#"><i class="fab fa-instagram"></i></a>
            <a href="#"><i class="fab fa-twitter"></i></a>
            <a href="#"><i class="fab fa-youtube"></i></a>
            <a href="#"><i class="fab fa-linkedin-in"></i></a>
          </div>
        </form>
      </div>
    </div>
    <div class="bottom">
      <p>Copyright © 2020 <a href="#">CodingLab</a> All rights reserved</p>
    </div>
  </footer>
</body>
</html>

Answers

Remove fixed on footer and height: 150vh on body. It makes more sense to use flex on body instead of grid with flex-direction: column; and justify-content: space-between; to evenly space <header>, <main>, and <footer>.

Then set header to sticky and nest your contact form in the <main> element.

The <main> element denotes the content of a webpage that relates to the central topic of the page. Hence, the contact form.

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

h1 {
  color: #333;
  font-family: Arial, Helvetica, sans-serif;
}

header {
  position: Sticky;
  background: #3a8ace;
  top: 0;
  left: 0;
  width: 100%;
  display: flex;
  justify-content: space-between;
  align-items: center;
  transition: 0.6s;
  padding: 20px 50px;
}

header .name {
  position: relative;
  font-weight: 800;
  color: #333;
  text-decoration: none;
  font-size: 2em;
  text-transform: uppercase;
  align-items: center;
}

header .navbar ul {
  position: relative;
  display: flex;
  justify-content: center;
  align-items: center;
  list-style: none;
}

header .navbar ul li {
  position: relative;
  float: left;
}

header .navbar ul li a {
  position: relative;
  margin: 0 15px;
  text-decoration: none;
  font-size: 18px;
  padding: 5px;
  color: #333;
  display: block;
}

.active,
.a:hover {
  background-color: #666;
  color: white;
}

header .navbar ul li a:hover {
  background: #333;
  color: #fff;
}

header .navbar ul li ul {
  /*     position: absolute; */
  left: 0;
  width: 200px;
  background: #fff;
}

#menu-bar {
  display: none;
}

header label {
  font-size: 20px;
  color: #333;
  cursor: pointer;
  display: none;
}

h1 {
  color: #333;
}

.topic {
  margin: auto;
  width: 60%;
  padding: 10px;
  text-align: center;
}

@media only screen and (max-width: 620px) {
  /* For mobile phones: */
  .menu,
  .main,
  .right {
    width: 100%;
  }
  @media (max-width: 991px) {
    main {
      margin-top: 80px;
    }
    header {
      padding: 30px;
    }
    header label {
      display: initial;
    }
    header .navbar {
      position: absolute;
      top: 100%;
      left: 0;
      right: 0;
      background: #fff;
      border-top: 1 px solid rgba(0, 0, 0, 0.1);
    }
    header .navbar ul li {
      width: 100%;
    }
    header .navbar ul li ul {
      position: relative;
      width: 100%;
    }
    #menu-bar:checked~.navbar {
      display: initial;
    }
  }
}

body {
  width: 100%;
  height: 100vh;
  display: flex;
  flex-direction: column;
  justify-content: space-between;
  align-items: center;
  margin-top: auto 0;
  margin-bottom: auto 0;
  background: #F6F6F6;
  font-family: 'Poppins', sans-serif;
}

.contact-in {
  width: 80%;
  height: auto;
  margin: auto;
  display: flex;
  flex-wrap: wrap;
  padding: 10px;
  border-radius: 10px;
  background: #fff;
  box-shadow: 0px 0px 10px 0px #666;
}

.contact-map {
  width: 100%;
  height: auto;
  flex: 50%;
}

.contact-map iframe {
  width: 100%;
  height: 100%;
}

.contact-form {
  width: 100%;
  height: auto;
  flex: 50%;
  text-align: center;
}

.contact-form h1 {
  margin-bottom: 10px;
}

.contact-form-txt {
  width: 100%;
  height: 40px;
  color: #000;
  border: 1px solid #bcbcbc;
  border-radius: 50px;
  outline: none;
  margin-bottom: 20px;
  padding: 15px;
}

.contact-form-txt::placeholder {
  color: #aaa;
}

.contact-form-textarea {
  width: 100%;
  height: 130px;
  color: #000;
  border: 1px solid #bcbcbc;
  border-radius: 10px;
  outline: none;
  margin-bottom: 20px;
  padding: 15px;
  font-family: 'Poppins', sans-serif;
}

.contact-form-textarea::placeholder {
  color: #aaa;
}

.contact-form-btn {
  width: 100%;
  border: none;
  outline: none;
  border-radius: 50px;
  background: #3a8ace;
  color: #fff;
  text-transform: uppercase;
  padding: 10px 0;
  cursor: pointer;
  font-size: 18px;
}

footer {
  width: 100%;
  bottom: 0;
  left: 0;
  background: #111;
}

footer .content {
  max-width: 1350px;
  margin: auto;
  padding: 20px;
  display: flex;
  flex-wrap: wrap;
  justify-content: space-between;
}

footer .content p,
a {
  color: #fff;
}

footer .content .box {
  width: 33%;
  transition: all 0.4s ease;
}

footer .content .topic {
  font-size: 22px;
  font-weight: 600;
  color: #fff;
  margin-bottom: 16px;
}

footer .content p {
  text-align: justify;
}

footer .content .lower .topic {
  margin: 24px 0 5px 0;
}

footer .content .lower i {
  padding-right: 16px;
}

footer .content .middle {
  padding-left: 80px;
}

footer .content .middle a {
  line-height: 32px;
}

footer .content .right input[type="text"] {
  height: 45px;
  width: 100%;
  outline: none;
  color: #d9d9d9;
  background: #000;
  border-radius: 5px;
  padding-left: 10px;
  font-size: 17px;
  border: 2px solid #222222;
}

footer .content .right input[type="submit"] {
  height: 42px;
  width: 100%;
  font-size: 18px;
  color: #d9d9d9;
  background: #eb2f06;
  outline: none;
  border-radius: 5px;
  letter-spacing: 1px;
  cursor: pointer;
  margin-top: 12px;
  border: 2px solid #eb2f06;
  transition: all 0.3s ease-in-out;
}

.content .right input[type="submit"]:hover {
  background: none;
  color: #eb2f06;
}

footer .content .media-icons a {
  font-size: 16px;
  height: 45px;
  width: 45px;
  display: inline-block;
  text-align: center;
  line-height: 43px;
  border-radius: 5px;
  border: 2px solid #222222;
  margin: 30px 5px 0 0;
  transition: all 0.3s ease;
}

.content .media-icons a:hover {
  border-color: #eb2f06;
}

footer .bottom {
  width: 100%;
  text-align: right;
  color: #d9d9d9;
  padding: 0 40px 5px 0;
}

footer .bottom a {
  color: #eb2f06;
}

footer a {
  transition: all 0.3s ease;
}

footer a:hover {
  color: #eb2f06;
}

@media (max-width:1100px) {
  footer .content .middle {
    padding-left: 50px;
  }
}

@media (max-width:950px) {
  footer .content .box {
    width: 50%;
  }
  .content .right {
    margin-top: 40px;
  }
}

@media (max-width:560px) {
  footer {
    position: relative;
  }
  footer .content .box {
    width: 100%;
    margin-top: 30px;
  }
  footer .content .middle {
    padding-left: 0;
  }
}

main {
  padding: 1em 0;
  width: 100%;
}

<!DOCTYPE html>
<html>

<head>
  <meta charset="utf-8">
  <meta name="viewport" content="width=device-width, initial-scale=1, minimum-scale=1, maximum-scale=1, user-scalable=no">
  <title> Contact Us </title>
  <link rel="stylesheet" href="contact.css">
  <link rel="preconnect" href="https://fonts.googleapis.com">
  <link rel="preconnect" href="https://fonts.gstatic.com" crossorigin>
  <link href="https://fonts.googleapis.com/css2?family=Poppins:ital,wght@0,100;0,200;0,300;0,400;0,500;0,600;0,700;0,800;0,900;1,100;1,200;1,300;1,400;1,500;1,600;1,700;1,800;1,900&display=swap" rel="stylesheet">
</head>

<body>
  <header>
    <a href="https://ecj.com.jm/"> <img src="img/ecjLogo.png" id="logo"> </a>
    <center>
      <div class="name"> ECJ </div>
    </center>
    <input type="checkbox" id="menu-bar">
    <label fr="menu-bar">Menu</label>
    <nav class="navbar">
      <ul>
        <li> <a href="index.html">Application</a></li>
        <li> <a href="help.html"> Help </a></li>
        <li> <a href="https://ecj.com.jm/about-the-ecj/about/"> About </a></li>
        <li> <a href="contact.html" active> Contact Us </a></li>
      </ul>
    </nav>
  </header>
  <main>
  <div class="contact-in">
    <div class="contact-map">
      <iframe src="https://www.google.com/maps/embed?pb=!1m18!1m12!1m3!1d948.8047317660009!2d-76.78757370737829!3d17.968548688002155!2m3!1f0!2f0!3f0!3m2!1i1024!2i768!4f13.1!3m3!1m2!1s0x8edb41467940d125%3A0x3c0567402b03262b!2sElectoral%20Office%20of%20Jamaica!5e0!3m2!1sen!2sjm!4v1679605097317!5m2!1sen!2sjm"
        width="100%" height="auto" style="border:0;" allowfullscreen="" loading="lazy" referrerpolicy="no-referrer-when-downgrade"></iframe>
    </div>

    <div class="contact-form">
      <h1> Contact Us</h1>
      <h3>Address:</h3>
      <p>GIS Department, <br> Electoral Office of Jamaica, <br> 43 Duke Street, Kingston, Jamaica</p> <br>
      <p>Tel: (876)-922-0425-9</p>
      <p>Toll-Free: 1-888-991-VOTE(8683)</p>
      <p>Fax: (876)-922-4058</p><br>
      <p>Email: [email protected]</p>
      <br>
      <form action="mailto:[email protected]" method="get" enctype="text/plain">
        Subject: <br>
        <input type="text" name="subject" placeholder="Your Full Name" class="contact-form-txt" required> <br> Email: <br>
        <input type="email" name="email" placeholder="Work Email" class="contact-form-txt" required><br> Message:
        <br>
        <textarea id="Message" name="Message" class="contact-form-textarea" rows="6" maxlength="3000" required cols="30" placeholder="Your Message"></textarea><br>
        <input type="submit" class="contact-form-btn" value="Send">
      </form>
    </div>
  </div>
  </main>
  <footer>
    <div class="content">
      <div class="left box">
        <div class="upper">
          <div class="topic">About us</div>
          <p>CodingLab is a channel where you can learn HTML, CSS, and also JavaScript along with creative CSS Animations and Effects.</p>
        </div>
        <div class="lower">
          <div class="topic">Contact us</div>
          <div class="phone">
            <a href="#"><i class="fas fa-phone-volume"></i>+007 9089 6767</a>
          </div>
          <div class="email">
            <a href="#"><i class="fas fa-envelope"></i>[email protected]</a>
          </div>
        </div>
      </div>
      <div class="middle box">
        <div class="topic">Our Services</div>
        <div><a href="#">Web Design, Development</a></div>
        <div><a href="#">Web UX Design, Reasearch</a></div>
        <div><a href="#">Web User Interface Design</a></div>
        <div><a href="#">Theme Development, Design</a></div>
        <div><a href="#">Mobile Application Design</a></div>
        <div><a href="#">Wire raming & Prototyping</a></div>
      </div>
      <div class="right box">
        <div class="topic">Subscribe us</div>
        <form action="#">
          <input type="text" placeholder="Enter email address">
          <input type="submit" name="" value="Send">
          <div class="media-icons">
            <a href="#"><i class="fab fa-facebook-f"></i></a>
            <a href="#"><i class="fab fa-instagram"></i></a>
            <a href="#"><i class="fab fa-twitter"></i></a>
            <a href="#"><i class="fab fa-youtube"></i></a>
            <a href="#"><i class="fab fa-linkedin-in"></i></a>
          </div>
        </form>
      </div>
    </div>
    <div class="bottom">
      <p>Copyright © 2020 <a href="#">CodingLab</a> All rights reserved</p>
    </div>
  </footer>
</body>
</html>

- DanMullin
- April 5, 2023 at 6:27 pm
- 0 votes
0
@Kameron posted a great answer.

Here are my additional recommendations for resolving other issues you may encounter.

Always start with this as the top of your CSS file. The order of html and * is important:
```
html {
  box-sizing: border-box;
  height: 100%;
}
*, *::before, *::after {
  box-sizing: inherit;
}
body {
  min-height: 100%;
  margin: 0;
  display: flex;
  flex-flow: column nowrap;
}
```
Then, set flex to zero on all direct descendants, while setting it to one on main

This is what forces the footer to the bottom. main will always consume empty vertical space. This also allows the footer to be pushed down when there is more content.
```
header, footer {
  flex: 0;
}
main {
  flex: 1;
}
```
Login or Signup to reply.

- ChikkenFail
- April 5, 2023 at 6:29 pm
- 0 votes
0
you can try this :
```
body {
    min-height: 100vh; 
    display: flex; 
    flex-direction: column;
}
footer{ 
    margin-top: auto; 
}
```
Here, you force your body to be the height of the screen and your footer to be as far as possible from the top of the screen! here is a useful link where I found the info: https://dev.to/nehalahmadkhan/how-to-make-footer-stick-to-bottom-of-web-page-3i14
Login or Signup to reply.

Please signup or login to give your own answer.

Click here to cancel reply.

How to make footer stick to the bottom of the page and not cover the content – Html

Answers