当页面高度使用CSS动态更改时,将页脚保持在页面底部

Question

有很多主题,提供解决方案,以保持页脚在页面底部.但是,我正在努力让它发挥作用.

问题是页面可以动态地改变它的高度.

使用我正在使用的当前解决方案,页脚位于页面的底部.但是当页面高度动态变化时,页脚仍保持在其确切位置.

页脚的CSS如下:

#footer {
    position: absolute;
    right: 0;
    bottom: 0;
    left: 0;
}

在html和body标签具有以下规则:

html, body {
    min-height: 100%;
    height: 100%;
}

请参阅下面的代码段以获取可视化演示(最适合在全窗口模式下使用)

$(document).ready(function() {
  
  var button = $("#addContent");
  var lorem = "<p>Proin cursus odio quis neque porttitor pretium. Duis cursus dolor mi, quis blandit eros dictum vitae. Mauris tempus turpis non leo commodo sagittis ac ac urna. Vivamus aliquet euismod posuere. Suspendisse at semper mauris. Phasellus blandit convallis tincidunt. Maecenas elementum ullamcorper risus, a vestibulum ex accumsan sed. Nulla facilisi.</p><p>Proin cursus odio quis neque porttitor pretium. Duis cursus dolor mi, quis blandit eros dictum vitae. Mauris tempus turpis non leo commodo sagittis ac ac urna. Vivamus aliquet euismod posuere. Suspendisse at semper mauris. Phasellus blandit convallis tincidunt. Maecenas elementum ullamcorper risus, a vestibulum ex accumsan sed. Nulla facilisi.</p><p>Proin cursus odio quis neque porttitor pretium. Duis cursus dolor mi, quis blandit eros dictum vitae. Mauris tempus turpis non leo commodo sagittis ac ac urna. Vivamus aliquet euismod posuere. Suspendisse at semper mauris. Phasellus blandit convallis tincidunt. Maecenas elementum ullamcorper risus, a vestibulum ex accumsan sed. Nulla facilisi.</p><p>Proin cursus odio quis neque porttitor pretium. Duis cursus dolor mi, quis blandit eros dictum vitae. Mauris tempus turpis non leo commodo sagittis ac ac urna. Vivamus aliquet euismod posuere. Suspendisse at semper mauris. Phasellus blandit convallis tincidunt. Maecenas elementum ullamcorper risus, a vestibulum ex accumsan sed. Nulla facilisi.</p>";
  
  button.click(function() {
    
    $("main button").before(lorem);
    
  });
  
});

* {
  box-sizing: border-box;
}

body {
  margin: 0;
}

header {
  background: #333;
  color: #fff;
  padding: 25px;
}

main {
  padding: 25px;
}

main h3 {
  margin-top: 0;
}

code {
  background: #f1f1f1;
  padding: 0 5px;
}

footer {
  position: absolute;
  background: #ededed;
  padding: 25px;
  color: #000;
  right: 0;
  bottom: 0;
  left: 0;
}

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>

<header>
  <p>Just a sample header</p>
</header>

<main>
  <h3>Some sample content</h3>
  <p>Click on the <code>button</code> to see what i mean.</p>
  <p>When the <code>heigth</code> of the page dynamically changes, the <code>footer</code> will stay at its exact position.</p>
  <button id="addContent">Click to add more content</button>
</main>

<footer>
  <p>The footer</p>
</footer>

如何让CSS知道高度变化？并保持这一脚注在底部的的文件,而不是其停留在底部的的窗口？

Answer 1

首先，如果您想使用position: absolute，那么父级应该不同于初始位置，例如position: relative，否则它将查找相对定位的第一个父级元素。因此，如果添加position: relativeto body，页脚将是动态的。

但是绝对定位的元素完全从文档流中删除，所以在这种情况下它会重叠在其他元素上，但是如果我们添加transform: translateY(100%)

所以最终你会得到：

body {
    margin: 0;
    position: relative;
}

footer {
    position: absolute;
    background: #ededed;
    padding: 25px;
    color: #000;
    right: 0;
    bottom: 0;
    left: 0;
    transform: translateY(100%);
}