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

如果正常布局，

D:\myfolder\work\charlie\reports会将元素输出。然后使用左，右和底部将页脚粘贴到底部，基本上将其放在页面底部。

通过取出这些线条，我的小提琴似乎超出了你想要的东西。如果您希望页脚没有边距，请将边距转为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>

无法页脚留在页面底部

3 个答案: