Question

所以我希望页脚位于我的身体容器的底部。我已经用bottom: 0;固定了位置，但它仍然不在容器内。我也不希望将任何信息推送到页脚下方。

我的目标是使页脚位于页面的绝对底部，但不覆盖任何内容。

body {
  width: 90%;
  max-width: 1100px;
  min-height: 50vh;
  margin: 15px auto;
  background-color: white;
  border: 3px solid black;
}

footer {
  position: absolute;
  bottom: 0;
  background-color: #333;
  width: 90%;
  border: 3px solid black;
  color: white;
}

<body>
  <main>
    <h1>
      Welcome
    </h1>
    <p>
      Lorem ipsum dolor sit amet, consectetur adipisicing elit. Aliquid expedita accusantium officia consequuntur corporis laudantium qui fuga cum, tempore sed.
    </p>
    <hr>
    <p>

      Lorem ipsum dolor sit amet, consectetur adipisicing elit. Sint nihil architecto, placeat ducimus natus earum quidem consectetur? Sunt magnam, quas. Lorem ipsum dolor sit amet, consectetur adipisicing elit. Possimus praesentium voluptas, debitis aliquid,
      voluptatem quidem asperiores ex rerum iste eveniet. Lorem ipsum dolor sit amet, consectetur adipisicing elit. Et vitae, nihil tenetur fuga voluptatibus debitis adipisci, minima eius voluptas id.

    </p>
    <footer>
      <p>
        Lorem ipsum dolor sit amet, consectetur adipisicing elit. Necessitatibus fuga eius, velit, impedit adipisci doloribus eveniet reiciendis architecto consequuntur reprehenderit.
      </p>
    </footer>
  </main>
</body>

Answer 1

有很多方法可以解决此问题。让我列出它们。

固定了页脚并在身体上填充了
粘性页脚，始终保持底部，如果有多余的内容，则会在内容结尾处进一步推入。

固定页脚

考虑到body默认具有position: relative;的情况，这是一种更简单的方法，您所需要做的就是在页脚上使用position: fixed;并将其推到末尾。给padding-bottom的身体稍高于footer的高度，就这些！

这不会破坏任何内容。

body {
  padding-bottom: 50px;
}
footer {
  line-height: 30px;
  position: fixed;
  left: 0;
  right: 0;
  bottom: 0;
  background-color: #f5f5f5;
  border-top: 2px solid #ccc;
}

<p>Lorem ipsum dolor sit amet, consectetur adipisicing elit. Quos, consectetur sequi. Natus sit iste nemo, dolor dolorum alias repellat, itaque molestiae delectus ipsum commodi perspiciatis architecto, officia at, ducimus. Dolore.</p>
<p>Modi provident officiis accusantium, quasi, quae temporibus soluta excepturi esse veniam sed, debitis nostrum harum? Esse enim dolorem soluta, nisi, voluptatibus cupiditate harum eaque voluptate. Rerum nihil, perspiciatis aliquam nesciunt.</p>
<p>Eum, vitae, praesentium. Consequuntur quae eaque sit quidem illo iste in libero magni natus eveniet quasi ab, velit id culpa tempore non quisquam dolorum doloremque officia, adipisci consectetur laboriosam expedita.</p>
<p>Qui sint, saepe, sapiente recusandae voluptatem iure quisquam. Quos numquam, ut deleniti provident minus dolore eaque, natus unde, voluptatum aperiam suscipit pariatur, cupiditate illum odio alias asperiores quo accusantium quod?</p>
<p>Fugiat harum sit, repudiandae magni cumque aliquid quam praesentium, atque quasi cupiditate nam voluptatum blanditiis. Odio reprehenderit veniam asperiores atque minus eveniet dolor doloribus, mollitia porro eius quod laboriosam dicta?</p>
<p>Quibusdam consequuntur ab aliquam et, a, corporis nisi natus eum placeat accusamus sint! Officiis vero doloremque sapiente, impedit debitis cupiditate repellendus ex commodi fugit sint aliquam molestiae suscipit, perferendis libero!</p>
<p>Tempora id adipisci tenetur aspernatur exercitationem nisi eveniet necessitatibus, itaque suscipit possimus sit minus ullam libero non animi incidunt excepturi accusamus totam molestias molestiae voluptates sed quos autem! Asperiores, optio!</p>
<p>Saepe ex dolorum sapiente eveniet alias et qui perspiciatis, culpa optio error ducimus, tenetur sed exercitationem ullam animi. Eligendi architecto nemo, reiciendis delectus nam quas, neque distinctio voluptatum dolor hic?</p>
<p>Deserunt, esse dolor, accusamus aut officiis illum, tempore aliquam saepe animi voluptas nam deleniti vitae architecto adipisci fugit. Sint ex architecto autem commodi quidem, minima porro obcaecati harum asperiores, itaque.</p>
<p>Error dolores incidunt ut nostrum perspiciatis, veniam. Consequuntur, temporibus dignissimos? Facere accusantium, vel officia, ut sequi nulla impedit alias ex dolores quos perferendis doloremque earum eum. Impedit blanditiis cupiditate, voluptatum!</p>
<p>Unde quae labore, dolor eos inventore porro qui. Eaque excepturi odio eveniet alias, voluptatibus, eius ipsum facere ad. Ullam, voluptas, inventore. Quo eius fugit nulla ipsum quibusdam odit, ullam tempora?</p>
<p>Aut omnis cumque exercitationem tempore harum odit repellendus reprehenderit quibusdam eligendi amet quam consequatur fugiat, cum enim aliquid debitis? Fuga a corporis nemo explicabo id animi nostrum, laudantium similique repellat.</p>
<p>Quasi sed deleniti nemo exercitationem, a beatae cum, vero ex similique omnis rerum perferendis facere tempora sit quaerat voluptatum nam qui temporibus! Numquam fugiat dolorum quia alias hic totam vitae!</p>
<p>Quidem, omnis corrupti tempora architecto. Officiis repudiandae provident ratione quod veritatis a dolor vel sit ullam ex error voluptates, alias itaque distinctio. Deleniti voluptatum, laudantium excepturi tempore. Aut, vero quisquam.</p>
<p>Repellendus rerum veritatis corporis! Exercitationem numquam temporibus asperiores nobis at quod est eius, similique tempore tenetur fugit eum libero beatae laborum. Dolores labore eos ullam reiciendis, repellendus neque vitae alias!</p>
<p>This is the last para!</p>
<footer>
  <p>Copyright &copy; This is Footer!</p>
</footer>

粘性页脚

粘性页脚的目的是将其“粘贴”到浏览器窗口的底部。但并非总是如此，如果页面上有足够的内容将页脚向下推，它仍然会这样做。但是，如果页面上的内容很短，则会在浏览器窗口的底部悬挂一个页脚。

请参考以下内容：CSS - Sticky footer和Sticky Footer, Five Ways。

Answer 2

只需添加位置：相对于身体，绝对相对于页脚

body {
    width: 90%;
    max-width: 1100px;
    min-height: 90vh;
    margin: 15px auto;
    background-color: white;
    border: 3px solid black;
    position:relative;
}

footer{
  background:red;
  position:absolute;
  bottom:0;
}

Answer 3

您应该将页脚放置在主标签之外。

   <body>
    <main>
      <h1>
      Welcome
      </h1>
      <p>
      Lorem ipsum dolor sit amet, consectetur adipisicing elit. Aliquid expedita accusantium officia consequuntur corporis laudantium qui fuga cum, tempore sed.
      </p>
      <hr>
      <p>

        Lorem ipsum dolor sit amet, consectetur adipisicing elit. Sint nihil architecto, placeat ducimus natus       earum quidem consectetur? Sunt magnam, quas.

        Lorem ipsum dolor sit amet, consectetur adipisicing elit. Possimus praesentium voluptas, debitis aliquid,     voluptatem quidem asperiores ex rerum iste eveniet.

        Lorem ipsum dolor sit amet, consectetur adipisicing elit. Et vitae, nihil tenetur fuga voluptatibus           debitis adipisci, minima eius voluptas id.

      </p>

    </main>

<footer>
      <p>
      Lorem ipsum dolor sit amet, consectetur adipisicing elit. Necessitatibus fuga eius, velit, impedit adipisci doloribus eveniet reiciendis architecto consequuntur reprehenderit.
      </p>
    </footer>
    </body>

设置页脚的相对位置或固定位置。

    body {
        width: 90%;
        max-width: 1100px;
        min-height: 50vh;
        margin: 15px auto;
        background-color: white;
        border: 3px solid black;
    }

    footer {
      position: fixed;
      bottom: 0;
      background-color: #333;
      width: 90%;
      border: 3px solid black;
      color: white;
    }

这可以完成工作！

将页脚推到底部而不将信息悬停在底部

3 个答案: