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%;
}

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

＆＃13;

$(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);
    
  });
  
});

＆＃13;

* {
  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;
}

＆＃13;

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

＆＃13;

如何让CSS知道更改的高度？并将该页脚保留在文档的底部 ，而不是保留在窗口的底部 ？

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动态更改时，将页脚保持在页面底部

1 个答案: