要让页脚正确地放置在屏幕底部吗？

Question

当没有足够的内容来填充视口（即固定）时，我希望将页脚放置在屏幕底部。但是，当主体的内容超出视口时（如果页面是可滚动的），还应将其附加到底部。

div.fixed {
  position: fixed;
  bottom: 0;
  right: 0;
  width: 300px;
  border: 3px solid #73AD21;
}
html {
  height: 100%;
}
body {
  min-height: 100%;
  background-color:red;
}
<h2>position: fixed;</h2>
<p>An element with position: fixed; is positioned relative to the viewport, which means it always stays in the same place even if the page is scrolled:
      An element with position: fixed; is positioned relative to the viewport, which means it always stays in the same place even if the page is scrolled:An element with position: fixed; is positioned relative to the viewport, which means it always stays in the same place even if the page is scrolled:An element with position: fixed; is positioned relative to the viewport, which means it always stays in the same place even if the page is scrolled:An element with position: fixed; is positioned relative to the viewport, which means it always stays in the same place even if the page is scrolled:An element with position: fixed; is positioned relative to the viewport, which means it always stays in the same place even if the page is scrolled:An element with position: fixed; is positioned relative to the viewport, which means it always stays in the same place even if the page is scrolled:An element with position: fixed; is positioned relative to the viewport, which means it always stays in the same place even if the page is scrolled:An element with position: fixed; is positioned relative to the viewport, which means it always stays in the same place even if the page is scrolled:An element with position: fixed; is positioned relative to the viewport, which means it always stays in the same place even if the page is scrolled:An element with position: fixed; is positioned relative to the viewport, which means it always stays in the same place even if the page is scrolled:An element with position: fixed; is positioned relative to the viewport, which means it always stays in the same place even if the page is scrolled:An element with position: fixed; is positioned relative to the viewport, which means it always stays in the same place even if the page is scrolled:An element with position: fixed; is positioned relative to the viewport, which means it always stays in the same place even if the page is scrolled:An element with position: fixed; is positioned relative to the viewport, which means it always stays in the same place even if the page is scrolled:An element with position: fixed; is positioned relative to the viewport, which means it always stays in the same place even if the page is scrolled:An element with position: fixed; is positioned relative to the viewport, which means it always stays in the same place even if the page is scrolled:An element with position: fixed; is positioned relative to the viewport, which means it always stays in the same place even if the page is scrolled:An element with position: fixed; is positioned relative to the viewport, which means it always stays in the same place even if the page is scrolled:An element with position: fixed; is positioned relative to the viewport, which means it always stays in the same place even if the page is scrolled:An element w
</p>
<div style="background-color:yellow; bottom:0px; position:relative;">This div element has position: fixed;</div>

当没有足够的内容来填充视口（即固定）时，我希望将页脚放置在屏幕底部。但是，当...

Answer 1

您可以结合使用position: relative和position: absolute