Question

我的页脚没有出现在页面的末尾。它出现在中间。我已经尝试过其他人在类似问题上给出的所有其他答案，但效果不佳。

这是我的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>

我的页脚出现在投资组合区域内的任何位置。这是我的无礼：-

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

Answer 1

向html标签添加width和height属性可以解决问题。

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>

我的页脚没有出现在页面底部，而是出现在页面中间

1 个答案: