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

Question

那里有很多主题，提供了将页脚保持在页面底部的解决方案。但是，我正在努力让它工作。

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

对于 the current solution I'm using，页脚位于页面底部。但是当页面高度动态变化时，页脚保持在其准确位置。

页脚的CSS如下：

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

html 和 body 标签具有以下规则：

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

查看下面的代码片段以获取可视化演示（最好在完整 window 模式下使用）

$(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 知道高度发生了变化？并将该页脚保留在文档的底部而不是停留在底部 window?

Answer 1

首先，如果你想使用 position: absolute，那么父元素应该不是初始位置，比如 position: relative，否则它会查找第一个父元素的相对位置。因此，如果将 position: relative 添加到 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%);
}

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

Keep footer at bottom of page when page height dynamically changes using CSS

html

css

sticky-footer