html - 在我的页面页脚之前放置一个 div

Question

附上页面布局以更好地解释我的要求。

1. 将文本放在页 footer 分之前。
2. 有时页脚可能不可见(可能需要滚动)，在这种情况下，将文本置于可见区域的底部。

我尝试了很多方法来实现这一目标。 解决此问题的任何指示都会有所帮助。

谢谢， 桑托斯

Answer 1

你可以使用 flexbox 来实现这一点

body {
  margin: 0;
  
  display: flex;
  flex-direction: column;
  min-height: 100vh;
}

.content {
  /* occupy all height */
  flex: 1 0 auto;
  /* nested flex container */
  display: flex;
  flex-direction: column;
}

.bottom-text {
  /* Move to the bottom */
  /* This works because this is flex item */
  margin-top: auto;
}

/* styles just for demo */
body {
  text-align: center;
}

header {
  background-color: tomato;
}

.content {
  background-color: lightsteelblue;
}

.bottom-text {
  background-color: moccasin;
}

footer {
  background-color: lime;
}

<header>Page header</header>
<section class="content">
  Page content
  <div class="bottom-text">Place a text just before footer</div>
</section>
<footer>Page footer</footer>

为了在 footer 不可见时显示 bottom-text，我们将使用 Javascript:

// Checks if element is visible on screen
function checkVisible(element) {
  var rect = element.getBoundingClientRect();
  var viewHeight = Math.max(document.documentElement.clientHeight, window.innerHeight);
  return !(rect.bottom < 0 || rect.top - viewHeight >= 0);
}

var footer = document.querySelector("footer");
var bottomText = document.querySelector(".bottom-text");
var bottomTextFixedClassName = "bottom-text--fixed";

// Sets element position as fixed
// when footer is not visible on screen
function setFixedButtonText() {
  if (checkVisible(footer))
    bottomText.classList.remove(bottomTextFixedClassName);
  else
    bottomText.classList.add(bottomTextFixedClassName);
}

window.addEventListener("scroll", setFixedButtonText);

setFixedButtonText();

body {
  margin: 0;
  display: flex;
  flex-direction: column;
  min-height: 100vh;
}

.content {
  /* occupy all height by flex-grow: 1 */
  /* Don't shrink using flex-shrink: 0 */
  /* Setting flex-basis to 1500px to emulate long content */
  /* Replace 1500px with auto in production code */
  flex: 1 0 1500px;
  /* nested flex container */
  display: flex;
  flex-direction: column;
}

.bottom-text {
  /* Move to the bottom */
  /* This works because this is flex item */
  margin-top: auto;
}

.bottom-text--fixed {
  position: fixed;
  left: 0;
  right: 0;
  bottom: 0;
}

/* styles just for demo */
body {
  text-align: center;
}

header {
  background-color: tomato;
}

.content {
  background-color: lightsteelblue;
}

.bottom-text {
  background-color: moccasin;
}

footer {
  background-color: lime;
}

<header>Page header</header>
<section class="content">
  Page content
  <div class="bottom-text">Place a text just before footer</div>
</section>
<footer>Page footer</footer>

如果您需要 IE 支持，您可以将 min-height: 100vh; 更改为 height: 100vh;。这是 IE 的 min-height bug for flex with flex-direction: column; 的解决方法。