Html Can'；不要让页脚停留在页面底部

我有一些HTML如下所示：

我无法使页脚保持在底部，并且不与页面上的文本重叠。如果没有足够的内容迫使页脚低于窗口高度，页脚应留在页面底部。我对第一部分的理解是正确的，但不能让它不重叠；我知道这是因为

位置：绝对的

——但我在网上搜索的一切都告诉我这是必要的

我希望它能像这样工作：

有没有办法解决这个问题

<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>

---

position:absolute

在正常布局下取出元素。然后使用left、right和bottom将页脚粘贴到底部，实际上是将页脚放在页面底部

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

---

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

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

---

使用

flexbox

将

.container

设置为带有

显示：flex的flex容器，并将弹性项堆叠在一列中，列中的弹性方向为
flex direction:column

然后将主要内容设置为
flex:1
，这是

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

这将使其增长，以填充空间，从而将页脚推到页面底部

当主要内容到达页脚时，它会将页脚从页面上推下，因为页脚位于flex容器中


$（“.add section”）。在（“单击”，函数（）{
$（“主要”）。附加（“佩伦特式居住者morbi tristique Sentecus et netus et malesuada fames ac turpis egestas.前庭侵权码头，封建生活，ultricies eget，临时住所，ante”）；
});
*{
框大小：边框框；
}
html，正文{
字体大小：300；
字体大小：16px；
填充：0；
保证金：0；
身高：100%；
}
.包裹{
显示器：flex；
最小高度：100%；
弯曲方向：立柱；
}
标题{
背景：灰色；
}
标题。标志{
填充：1.4rem；
字号：2rem；
}
主要{
弹性：1；
}
.科{
字号：1.1rem；
填充：1rem2rem；
保证金：0；
背景：#ccc；
}
页脚{
背景：灰色；
填充：1.2rem 1.4rem；
字号：1.2rem；
}

Flexbox页脚
添加节
佩伦特式居住者morbi tristique Sentecus et netus et malesuada以turpis egestas闻名。前庭侵权人、世仇、别有用心者、临时诉讼人、担保人。不要让你的自由人坐在那里。我的生命是永恒的。莫里斯·普莱斯特拉特·埃利芬德·利奥。
页脚
似乎是个模糊的问题。你所说的“页脚保持在底部而不与文本重叠”是什么意思？你是指父窗口的底部还是窗口的底部？它应该总是可见的吗？可能是@pjones235的副本我更新了OP，并进一步澄清。如果你问题中提到的是你想要的，为什么不使用它？它无法应用于您的案例？@ConnorsFan，因为出于某种原因，它无法与我的特定布局一起工作。因此，问题来了。如果我知道页脚的高度，这就行了。实际上，我正在使用一个第三方组件作为页脚，我无法显示，因为它是我公司内部的。我编辑了我的OP，以进一步澄清我在寻找什么。啊，好吧，我的答案肯定没有这样做。这很棘手，因为当页面足够长时，您需要常规布局，但当内容不够长而无法填充页面时，您需要不同的布局。我见过有人用JavaScript来做这件事，但我认为这是一条低性能、重磅的网站，如果你没有把所有的尺寸都弄对的话，这些网站往往会有小的布局错误，比如一个1像素的滚动条。我会等着看是否有人能想出一个优雅的解决方案。
flex-grow: 1;
flex-shrink: 1;
flex-basis: 0%;