无法让页脚停留在页面底部

Question

我有一些看起来像这样的 HTML：https://jsfiddle.net/9uwmxLa8/

我无法让页脚停留在底部，并且 不 与页面上的文本重叠。如果没有足够的内容来强制页脚低于窗口高度，页脚应该留在页面底部。我的第一部分是对的——但不能让它不重叠；我知道这是因为position: absolute--但我在网上搜索的所有内容都告诉我这是必要的。

我希望它像这样运行：https://codepen.io/cbracco/pen/zekgx

任何想法如何解决这个问题？

<div class="container">
  <div>
    <h1>This is some long test content.</h1>

    <p>
      Lorem ipsum dolor sit amet, consectetur adipiscing elit. Duis eget sapien risus. Cras eleifend, diam quis tempus mattis, nunc leo vulputate metus, et rhoncus elit libero ac nisl. In ligula lectus, ultricies in pretium eget, accumsan non turpis. Lorem
      ipsum dolor sit amet, consectetur adipiscing elit. Praesent finibus molestie ultricies. Vivamus et libero et mauris rutrum hendrerit sed in leo. Fusce luctus lorem iaculis, mattis felis non, suscipit nisi. Integer tempus blandit est tempus ullamcorper.
      Ut at risus eget arcu congue rhoncus sit amet pharetra turpis. Maecenas ultricies, ex eget egestas scelerisque, ante ipsum placerat mauris, vitae porta felis mauris dictum nisi. Lorem ipsum dolor sit amet, consectetur adipiscing elit.
    </p>
    <p>
      Duis fringilla dolor a neque laoreet tristique. Donec non feugiat orci. Nulla nulla mauris, fermentum at arcu quis, venenatis consectetur odio. Vestibulum a risus non lorem ullamcorper sollicitudin. Praesent quis ante ipsum. Suspendisse odio ligula, tincidunt
      vitae consectetur vel, posuere tincidunt odio. Donec at mollis neque. Sed ex felis, aliquam sed turpis eget, porta aliquet justo. Vivamus vestibulum libero id pulvinar egestas.
    </p>
    <p>
      Quisque vestibulum urna eu blandit consectetur. Integer eget massa suscipit, scelerisque augue sed, mattis erat. Proin ut tincidunt nisi. Duis vestibulum congue accumsan. Vivamus a nisi tellus. Proin pretium neque eros, quis lacinia nisl pulvinar eget.
      Quisque commodo urna eu nibh vulputate accumsan. Sed nec neque blandit, commodo metus sed, hendrerit orci. Nullam ullamcorper libero massa, vel pretium felis vulputate sed. Mauris in mauris pretium, accumsan erat quis, dapibus lacus.
    </p>
    <p>
      Quisque arcu metus, ultricies sed urna a, gravida aliquam mauris. Nullam quis velit odio. Pellentesque dignissim odio tortor, at tempus nunc posuere et. In consequat eros a nunc varius, quis varius metus malesuada. Mauris viverra auctor elit quis hendrerit.
      Donec risus ante, viverra et ante a, egestas faucibus purus. Integer semper id nulla eget vehicula. Aliquam a egestas leo. Suspendisse eu magna sit amet eros tempor ultrices. Quisque sed tempor purus, vitae egestas nunc. Cras congue nulla in sem
      eleifend, sed pharetra ipsum volutpat. Etiam suscipit lacus ultricies dolor hendrerit fermentum. Pellentesque vestibulum in tellus ac blandit. In nec elit non eros tincidunt semper. Fusce sed leo eget ex laoreet fermentum sed vitae nibh. Aliquam
      aliquam erat magna, sit amet gravida neque aliquam ac.
    </p>
    <p>
      Phasellus vehicula, libero eget tempus tristique, lectus felis ornare erat, sit amet semper sapien sem ac nisl. Sed dignissim vulputate mauris, id imperdiet tellus tincidunt id. Proin eget risus a enim convallis pulvinar. In bibendum augue in tellus fermentum
      sollicitudin. Proin finibus tellus lacinia hendrerit faucibus. Curabitur congue aliquam eros non condimentum. Nullam justo ex, pulvinar ac fringilla nec, ullamcorper in lorem ullamcorper in lorem ullamcorper in lorem. Quisque vestibulum urna eu
      blandit consectetur.
    </p>
  </div>


  <div class="footer">
    <div>
      This is a footer
    </div>
  </div>
</div>

SCSS：

p {
  margin: 0 auto;
  padding-top: 32px;
  max-width: 75%;
  font-size: 1.5em;
}

.container {
  min-height: 100%;
  position: relative;
}

.footer {
  position: absolute;
  right: 0;
  bottom: 0;
  left: 0;
  padding: 1rem;
  background-color: cyan;
  text-align: center;
}

Answer 1

如果是正常布局，

position: absolute 将元素 out 取出。然后，您可以使用 left、right 和 bottom 将页脚粘贴到底部，实际上是将其放在页面底部。

通过去掉这些线，我的小提琴似乎高于你想要的。如果您希望页脚没有边距，请将边距设置为 0。绝对定位不是这样做的。

https://jsfiddle.net/kLqp3my7/

Answer 2

将正文设为页面的 100%，最小高度也为 100%。 然后页脚被赋予负边距顶部：

#footer {
    clear: both;
    position: relative;
    z-index: 10;
    height: 3em;
    margin-top: -3em;
}

Answer 3

您可以使用flexbox 轻松创建一个粘在页面底部的页脚

将.container 设置为带有display: flex; 的弹性容器，并使用flex-direction: column; 将弹性项目堆叠在一列中

然后将主要内容设置为flex: 1 的简写

flex-grow: 1;
flex-shrink: 1;
flex-basis: 0%;

这将使它增长以填充空间，这会将页脚推到页面底部。

当主要内容到达页脚时，它会将页脚推离页面，因为它位于弹性容器中。

$(".add-section").on("click", function(){
  $("main").append("<div class='section s3'>Pellentesque habitant morbi tristique senectus et netus et malesuada fames ac turpis egestas. Vestibulum tortor quam, feugiat vitae, ultricies eget, tempor sit amet, ante.</div>");
});

* {
  box-sizing: border-box;
}

html, body {
  font-weight: 300;
  font-size: 16px;
  padding: 0;
  margin: 0;
  height: 100%;
}

.wrap {
  display: flex;
  min-height: 100%;
  flex-direction: column;
}

header {
  background: grey;
}
header .logo {
  padding: 1.4rem;
  font-size: 2rem;
}

main {
  flex: 1;
}

.section {
  font-size: 1.1rem;
  padding: 1rem 2rem;
  margin: 0;
  background: #ccc;
}

footer {
  background: grey;
  padding: 1.2rem 1.4rem;
  font-size: 1.2rem;
}

<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.2.1/jquery.js"></script>
<div class='wrap'>
  <header>
    <div class='logo'>
      Flexbox Footer
    </div>
    
  </header>
  <main>
    <div class='section s1'>
      <button class='add-section'>Add Section</button>
    </div>
    <div class='section s2'>
      Pellentesque habitant morbi tristique senectus et netus et malesuada fames ac turpis egestas. Vestibulum tortor quam, feugiat vitae, ultricies eget, tempor sit amet, ante. Donec eu libero sit amet quam egestas semper. Aenean ultricies mi vitae est. Mauris placerat eleifend leo.
    </div>
  </main>
  <footer>
    Footer
  </footer>
</div>