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

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

html css sass

Html 我的页脚没有出现在页面的底部，而是在页面的中间。,html,css,sass,Html,Css,Sass,我的页脚没有出现在页面的末尾。它出现在中间。我试过其他人对类似问题给出的所有答案，但都不起作用这是我的html：- <body> <div class="nav-container"> </div> <div class="hero-area"> </div> <div class="main-container"> <section id="abou

我的页脚没有出现在页面的末尾。它出现在中间。我试过其他人对类似问题给出的所有答案，但都不起作用

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

将宽度和高度属性添加到html标记中就可以做到这一点

html{ 身高：100%；宽度：100%； } 身体{ 填充：0；保证金：0；字体系列：开放式Sans，无衬线；颜色：f00；背景：0f0；溢出x：隐藏；身高：100%；位置：相对位置； } 页脚{ 背景：00f；填充：20px 30px；颜色：0ff；框大小：边框框；位置：绝对位置；底部：0；页边距底部：0；宽度：100%； } 保险商实验室{ 保证金：0； } 脸谱网 INSTAGRAM YOUTUBE 这是页脚！

试位：固定；而不是绝对的，因为你的脚不工作。它只是将页脚固定在屏幕底部。如果我这样做，将创建两个滚动条！对你说得对。这是由于UL标签与车身的边缘融合造成的。我编辑了我的答案来解决这个问题。你现在还好吗？还是不行。这是我在你的CSS中的完整代码，你可以删除高度：200vh，并在.main-container中添加填充底部：220px。非常感谢，Raphael！我忘了我添加这个是为了测试！

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