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

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

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

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

页脚的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>

---

首先，如果你想使用position: absolute ，那么parent应该是初始位置的其他位置，比如position: relative或者它会看起来是第一个父元素的位置。 所以如果你添加position: relative对于body ，页脚将是动态的。

但绝对定位的元素会从文档流中完全删除，因此在这种情况下它将与其他元素重叠，但是如果添加transform: translateY(100%) ，我们可以解决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%);
}

链接地址: http://www.djcxy.com/p/96969.html

上一篇: Keep footer at bottom of page when page height dynamically changes using CSS

下一篇: Templated Sum(Args...) variadic function doesn't compile