CODEWITHSUNDEEP
htmlcsssassfooter
JueK3y
JueK3y

Reputation: 317

Footer at the very end of the web page (after the content)

Info in advance:
I've been looking for a solution for almost a week now and have already searched half of StackOverflow.
I know that there are many questions with the same title, but these have not brought me any further.
So please before commenting that this is a duplicate, first try the respective solution on my code.

The goal:
I want to add my footer at the very end of the page after the content.

The problem:
The ideas I have tried so far do not work properly. Either the content is permanently displayed at the edge of the screen, no matter where you are (so to speak a sticky footer), or the footer is in the middle of the content.

The Code (HTML & SCSS):

<html>
      <head>
            <link id="theme" rel="stylesheet" href="style.css" type="text/css" />
            <title>Some page with footer</title>
      </head>
      <body>
            <!-- Navigation - Don't worry, the navigation stylesheet isn't included-->
            <div class="navigation">
                  <input id="burger" type="checkbox" />
                  <label for="burger">
                        <span></span>
                        <span></span>
                  </label>
                  <nav>    
                        <div class="logo">
                        </div>
                        <ul>
                            <li><a href="">Some navigation</a></li>
                            <li><a href="">Some content</a></li>
                        </ul>  
                  </nav>
                  <div class="icons">
                  </div>
            </div>
            <!-- Content -->
            <main>
                  <div class="content">
                        <h2 id="faq">FAQ</h2>
                              <p>Some content here:
                              <br>Lorem ipsum dolor sit amet consectetur adipisicing elit.
                              <br>Consectetur repellendus quia ab, voluptates tempore ipsam nemo?
                              <br>Ipsum mollitia odio maiores nisi dignissimos, temporibus magnam impedit est optio voluptate sit laboriosam?
                              <br>Lorem ipsum dolor sit amet consectetur adipisicing elit.
                              <br>Illum suscipit nobis, explicabo ducimus voluptates laudantium pariatur eius delectus repudiandae?
                              <br>Iure eaque sit quisquam itaque ducimus nam voluptates debitis nihil eligendi?
                              <br>Lorem ipsum dolor sit amet consectetur adipisicing elit.
                              <br>Consectetur repellendus quia ab, voluptates tempore ipsam nemo?
                              <br>Ipsum mollitia odio maiores nisi dignissimos, temporibus magnam impedit est optio voluptate sit laboriosam?
                              <br>Lorem ipsum dolor sit amet consectetur adipisicing elit.
                              <br>Illum suscipit nobis, explicabo ducimus voluptates laudantium pariatur eius delectus repudiandae?
                              <br>Iure eaque sit quisquam itaque ducimus nam voluptates debitis nihil eligendi?
                              <br>Lorem ipsum dolor sit amet consectetur adipisicing elit.
                              <br>Consectetur repellendus quia ab, voluptates tempore ipsam nemo?
                              <br>Ipsum mollitia odio maiores nisi dignissimos, temporibus magnam impedit est optio voluptate sit laboriosam?
                              <br>Lorem ipsum dolor sit amet consectetur adipisicing elit.
                              <br>Illum suscipit nobis, explicabo ducimus voluptates laudantium pariatur eius delectus repudiandae?
                              <br>Iure eaque sit quisquam itaque ducimus nam voluptates debitis nihil eligendi?
                              <br>Lorem ipsum dolor sit amet consectetur adipisicing elit.
                              <br>Consectetur repellendus quia ab, voluptates tempore ipsam nemo?
                              <br>Ipsum mollitia odio maiores nisi dignissimos, temporibus magnam impedit est optio voluptate sit laboriosam?
                              <br>Lorem ipsum dolor sit amet consectetur adipisicing elit.
                              <br>Illum suscipit nobis, explicabo ducimus voluptates laudantium pariatur eius delectus repudiandae?
                              <br>Iure eaque sit quisquam itaque ducimus nam voluptates debitis nihil eligendi?
                              <br>Lorem ipsum dolor sit amet consectetur adipisicing elit.
                              <br>Consectetur repellendus quia ab, voluptates tempore ipsam nemo?
                              <br>Ipsum mollitia odio maiores nisi dignissimos, temporibus magnam impedit est optio voluptate sit laboriosam?
                              <br>Lorem ipsum dolor sit amet consectetur adipisicing elit.
                              <br>Illum suscipit nobis, explicabo ducimus voluptates laudantium pariatur eius delectus repudiandae?
                              <br>Iure eaque sit quisquam itaque ducimus nam voluptates debitis nihil eligendi?
                              <br>Lorem ipsum dolor sit amet consectetur adipisicing elit.
                              </p>
                              <br>
                  </div>
            </main>
            <!-- Footer -->
            <footer>
                  <ul>
                        <li>@ Copyright 2021 by some guy</li>
                        <li>This is not the final website.</li>
                        <li>Contact</li>
                        <li>AGB/TERMS</li>
                        <li>LEGAL</li>
                  </ul>
            </footer>
      </body>
</html>


body {
  main {
    position: absolute;
    top: 15vh;
    bottom: 0;
    left: 0;
    right: 0;
    margin-left: auto;
    margin-right: auto;

    line-height: 40px;
    text-align: center;
    width: 90%;
    h2 {
      position: relative;
      font-family: 'Times New Roman', Times, serif ;
      font-size: 2.7vh;
      text-align: center;
    }
    p {
      position: relative;
      font-family: 'Gill Sans', 'Gill Sans MT', sans-serif;
      font-size: 1.5vh;
      text-align: center;
    }
  }
  footer {
    position: absolute;     // Footer is inside the content
    left: 0;
    top: 100vh;
    bottom: 0;
    width: 100%;
    height: 60px;
    text-align: center;
    background-color: red;
    ul li {
      display: inline;
    }
  }
}

Upvotes: 0

Views: 56

Answers (2)

n7y
n7y

Reputation: 92

I think this might help you

body {
  margin: 0;
  padding: 0;
}

.content {
  top: 15vh;
  bottom: 0;
  left: 0;
  right: 0;
  margin-left: auto;
  margin-right: auto;
  line-height: 40px;
  text-align: center;
  width: 90%;
}

h2 {
  position: relative;
  font-family: 'Times New Roman', Times, serif;
  font-size: 2.7vh;
  text-align: center;
}

p {
  position: relative;
  font-family: 'Gill Sans', 'Gill Sans MT', Calibri, 'Trebuchet MS', sans-serif;
  font-size: 1.5vh;
  text-align: center;
}

footer {
  left: 0;
  margin: 0;
  padding: 0;
  height: 60px;
  text-align: center;
  background-color: red;
  padding: 0;
}

ul, li {
  display: inline;
}
<html lang="en">

<head>
  <link id="theme" rel="stylesheet" href="style.css" type="text/css" />
  <title>Some page with footer</title>
</head>

<body>
  <!-- Navigation - Don't worry, the navigation stylesheet isn't included-->
  <div class="navigation">
    <input id="burger" type="checkbox" />
    <label for="burger">
        <span></span>
        <span></span>
      </label>
    <nav>
      <div class="logo">
      </div>
      <ul>
        <li><a href="">Some navigation</a></li>
        <li><a href="">Some content</a></li>
      </ul>
    </nav>
    <div class="icons">
    </div>
  </div>
  <!-- Content -->
  <main>
    <div class="content">
      <h2 id="faq">FAQ</h2>
      <p>Some content here:

        <br>Ipsum mollitia odio maiores nisi dignissimos, temporibus magnam impedit est optio voluptate sit laboriosam?
        <br>Lorem ipsum dolor sit amet consectetur adipisicing elit.
        <br>Illum suscipit nobis, explicabo ducimus voluptates laudantium pariatur eius delectus repudiandae?
        <br>Iure eaque sit quisquam itaque ducimus nam voluptates debitis nihil eligendi?
        <br>Lorem ipsum dolor sit amet consectetur adipisicing elit.
        <br>Consectetur repellendus quia ab, voluptates tempore ipsam nemo?
        <br>Ipsum mollitia odio maiores nisi dignissimos, temporibus magnam impedit est optio voluptate sit laboriosam?
        <br>Lorem ipsum dolor sit amet consectetur adipisicing elit.
        <br>Illum suscipit nobis, explicabo ducimus voluptates laudantium pariatur eius delectus repudiandae?
        <br>Iure eaque sit quisquam itaque ducimus nam voluptates debitis nihil eligendi?
        <br>Lorem ipsum dolor sit amet consectetur adipisicing elit.
        <br>Consectetur repellendus quia ab, voluptates tempore ipsam nemo?
        <br>Ipsum mollitia odio maiores nisi dignissimos, temporibus magnam impedit est optio voluptate sit laboriosam?
        <br>Lorem ipsum dolor sit amet consectetur adipisicing elit.
        <br>Illum suscipit nobis, explicabo ducimus voluptates laudantium pariatur eius delectus repudiandae?
        <br>Iure eaque sit quisquam itaque ducimus nam voluptates debitis nihil eligendi?
        <br>Lorem ipsum dolor sit amet consectetur adipisicing elit.
        <br>Consectetur repellendus quia ab, voluptates tempore ipsam nemo?
        <br>Ipsum mollitia odio maiores nisi dignissimos, temporibus magnam impedit est optio voluptate sit laboriosam?
        <br>Lorem ipsum dolor sit amet consectetur adipisicing elit.
        <br>Illum suscipit nobis, explicabo ducimus voluptates laudantium pariatur eius delectus repudiandae?
        <br>Iure eaque sit quisquam itaque ducimus nam voluptates debitis nihil eligendi?
        <br>Lorem ipsum dolor sit amet consectetur adipisicing elit.
      </p>
      <br>
    </div>
  </main>
  <!-- Footer -->
  <footer>
    <ul>
      <li>@ Copyright 2021 by some guy</li>
      <li>This is not the final website.</li>
      <li>Contact</li>
      <li>AGB/TERMS</li>
      <li>LEGAL</li>
    </ul>
  </footer>
</body>

</html>

Upvotes: 1

iniubong peter
iniubong peter

Reputation: 93

WordPress theme developers are always faced with this problem. One way to go about is to give your "main" element a style of

height:100vh;

This way it pushes the footer to the bottom of the page without you going through the stress of

position:absolute;

Upvotes: 1

Related Questions