html - 需要帮助来制作响应式页脚吗？

Question

有没有办法无论页面上有多少内容，页脚都位于底部，并且内容不与页脚重叠？

谢谢你的帮助

Answer 1

Flexbox 可能是一种非常灵活的解决方案。页脚将始终位于页面底部，除非内容太多，否则它只会位于页面末尾(因此不会“重叠”)。

document.getElementById("expand").addEventListener("click", function() { document.getElementById("long").style.display = "block"; });

* {
  box-sizing: border-box;
}
#container {
  display: flex;
  flex-direction: column;
  align-content: stretch;
  height: 100vh;
}
header, footer {
  flex-basis: auto;
  flex-grow: 0;
  padding: 20px;
  background: #ccc;
}
div#content {
  flex-grow: 1;
  padding: 20px;
}
div#long {
  display: none;
}

<div id="container">
  <header>This is the header with auto-height.</header>
  <div id="content">Short Content. <span id="expand"><strong><u>Click here more content!</u></strong></span>
  <div id="long"><img src="http://placehold.it/350x1000"></div></div>
  <footer>This is the footer, and always at the bottom of the window unless there's too much content.</footer>
</div>