CODEWITHSUNDEEP
htmlcsssass
killerprince182
killerprince182

Reputation: 465

My footer isn't appearing at the bottom of the page but in the middle of the page

My footer isn't appearing at the end of the page. It's appearing in the middle. I have tried all other answers given by others on a similar question, but it didn't work as well.

Here is my html: -

<body>
    <div class="nav-container">
    </div>

    <div class="hero-area">
    </div>


    <div class="main-container">

        <section id="about">
        </section>

        <section id="services">
        </section>

        <section id="portfolio">
        </section>

        <section id="contact">
        </section>

    </div>


    <ul class="social-items">
        <li>FACEBOOK</li>
        <LI>INSTAGRAM</LI>
        <LI>YOUTUBE</LI>
    </ul>

    <footer>
        <h1>This is footer!</h1>
    </footer>

</body>

My footer is appearing anywhere inside the portfolio area. Here is my sass: - 

body {
  padding: 0;
  margin: 0;
  font-family: "Open Sans", sans-serif;
  color: $light-mode;
  background: $dark-mode;
  @include dark-white-transition;
  overflow-x: hidden;
  min-height: 100%;
  position: relative;
}

footer {
  background: $dark-mode;
  padding: 60px 30px;
  color: $light-mode;
  box-sizing: border-box;
  position: absolute;
  bottom: 0;
  margin-bottom: 0;
  width: 100%;
}

Upvotes: 0

Views: 60

Answers (1)

Raphael Deiana
Raphael Deiana

Reputation: 750

Adding width and height properties to the html tag could do the trick.

html {
  height:100%;
  width:100%;
}

body {
  padding: 0;
  margin: 0;
  font-family: "Open Sans", sans-serif;
  color: #f00;
  background: #0f0;
  overflow-x: hidden;
  height: 100%;
  position: relative;
}

footer {
  background: #00f;
  padding: 20px 30px;
  color: #0ff;
  box-sizing: border-box;
  position: absolute;
  bottom: 0;
  margin-bottom: 0;
  width: 100%;
}

ul {
  margin:0;
}
<body>
    <div class="nav-container">
    </div>

    <div class="hero-area">
    </div>


    <div class="main-container">

        <section id="about">
        </section>

        <section id="services">
        </section>

        <section id="portfolio">
        </section>

        <section id="contact">
        </section>

    </div>


    <ul class="social-items">
        <li>FACEBOOK</li>
        <LI>INSTAGRAM</LI>
        <LI>YOUTUBE</LI>
    </ul>

    <footer>
        <h1>This is footer!</h1>
    </footer>

</body>

Upvotes: 1

Related Questions