Make footer disappear behind body and appear when scrolling down-CodePudding

I would like the footer of my website to stay behind the body until I start scrolling down or I hit the end of the page. Means: when I start scrolling the footer should start appearing the more I scroll and if there is enough content than the footer should only appear once I get to the bottom of the page. Here is what I did till now: https://jsfiddle.net/rq1gevb9/1/

I tried several tutorials, but I'm stuck with the footer on top and not under nor below the body.

Edit: CSS for the page

/* BODY */

body {
  font-family: Consolas;
  color: white;
  background-color: #151515;
  margin-left: 12%;
  margin-right: 12%;

  z-index: 2;
  margin-bottom: 20px;
  box-shadow: 100px -100px -100px -100px black;
}

/* HEADER */

header {
  padding: 20px;
  text-align: center;
}

header h1 {
  margin: 0;
}

header h1 a {
  color: whitesmoke;
}

header nav {
  margin-top: 10px;
}

header nav ul {
  list-style-type: none;
  margin: 0;
  padding: 0;
  display: flex;
  justify-content: center;
}

header nav ul li {
  margin: 0 10px;
}

header nav ul li a {
  text-decoration: none;
  color: white;
}

header nav a:hover {
  font-weight: 700;
  text-decoration: underline;
}

/* SECTIONS GLOBALS */

section {
  padding: 20px;
}

section h2 {
  margin-top: 0;
}

/* SECTIONS LOCALS */
/* SECTIONS Homepage */

section#hp-projects ul {
  list-style-type: none;
  margin: 0;
  padding: 0;
}

section#hp-projects ul li {
  margin-bottom: 10px;
}

section#hp-projects ul li a {
  text-decoration: none;
  color: white;
}

section#hp-projects ul li a:hover {
  font-weight: 700;
  text-decoration: underline;
}

/* SECTIONS About */

section#about-badges div img {
  height: 30px;
}

.column {
  display: inline-block;
}

/* FOOTER */

footer {
  width: 100%;
  position: fixed;
  left: 0;
  bottom: 0;
  z-index: -1;
  text-align: center;
  background-color: whitesmoke;
}

CodePudding user response：

You can use the min-height property to make your main content be at least the full screen height with 100vh. Here is an example:

<body>
  <main>
    <nav>Some Links</nav>
    <section>Some Content</section>
  </main>
  <footer>Footer goes here</footer>
</body>

and in your styles:

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

main {
  min-height: 100vh;
  width: 100%;
  background: blue;
}

footer {
  height: 200px;
  width: 100%;
  background: red;
}

Herer is the example fiddle: https://jsfiddle.net/qh4c8b5m/4/

CodePudding user response：

First fix some errors in HTML. Footer /footer element must be inside /body closing tag /body must be just before /html.

Then wrap all the content inside a div (class .container) excluding /footer /footer.

Write some CSS to syle the background color, width all the viewport and margin left to puti at the beginning of the screen. Give it a margin bottom space to reveal the footer behind after scrolling.

.container {
  background-color: #000;
  width: 100vw;
  margin-left: calc(-1*(50vw - 50%));
  margin-bottom: 150px;
}

Here the full HTML code

        <div >
      <header>
      <h1 style="display: inline-block;"><a href="page1.html">Projet NSI - Site Web</a></h1>
      <nav>
        <ul>
          <li><a href="page2.html">About</a></li>
          <li><a href="#projects">Projects</a></li>
        </ul>
      </nav>
    </header>

    <section id="hp-about">
      <h2>About Me</h2>
      <p>I am a web developer with no experience in HTML, CSS, and JavaScript. I am passionate about creating user-friendly and visually appealing websites.</p>
    </section>

    <section id="hp-projects">
      <h2>My Projects</h2>
      <ul>
        <li><a href="#">Project 1</a></li>
        <li><a href="#">Project 2</a></li>
        <br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br />
        <li><a href="#">Project 3</a></li>
      </ul>
    </section>
</div>
<!-- container closed  - footer excluded -->
  <footer>
    Footer!
    <br />
    Hi
    <br />
    Hi
    <br />
    Hi
    <br />
    Hi
    <br />
    Hi
    <br />
    Hi
    <br />
    Hi
  </footer>

Here the full CSS code

    /* BODY */

body {
  font-family: Consolas;
  color: white;
  background-color: #151515;
  margin-left: 12%;
  margin-right: 12%;

  z-index: 2;
  margin-bottom: 20px;
  box-shadow: 100px -100px -100px -100px black;
}

.container {
  background-color: #000;
  width: 100vw;
  margin-left: calc(-1*(50vw - 50%));
  margin-bottom: 150px;
}
/* HEADER */

header {
  padding: 20px;
  text-align: center;
}

header h1 {
  margin: 0;
}

header h1 a {
  color: whitesmoke;
}

header nav {
  margin-top: 10px;
}

header nav ul {
  list-style-type: none;
  margin: 0;
  padding: 0;
  display: flex;
  justify-content: center;
}

header nav ul li {
  margin: 0 10px;
}

header nav ul li a {
  text-decoration: none;
  color: white;
}

header nav a:hover {
  font-weight: 700;
  text-decoration: underline;
}

/* SECTIONS GLOBALS */

section {
  padding: 20px;
}

section h2 {
  margin-top: 0;
}

/* SECTIONS LOCALS */
/* SECTIONS Homepage */

section#hp-projects ul {
  list-style-type: none;
  margin: 0;
  padding: 0;
}

section#hp-projects ul li {
  margin-bottom: 10px;
}

section#hp-projects ul li a {
  text-decoration: none;
  color: white;
}

section#hp-projects ul li a:hover {
  font-weight: 700;
  text-decoration: underline;
}

/* SECTIONS About */

section#about-badges div img {
  height: 30px;
}

.column {
  display: inline-block;
}

/* FOOTER */

footer {
  width: 100%;
  position: fixed;
  left: 0;
  bottom: 0;
  z-index: -1;
  text-align: center;
  background-color: #FFF;
  color: #000;
}

Here the working codepen example https://codepen.io/Davevvave/pen/VwBzYNa