将背景跨度div保留在页面底部，而不是窗口

Question

我有一个span元素，作为纯色背景，高度为300像素。我希望这个span块始终位于页面的底部，而不是当前正在发生的窗口/屏幕。有人能帮助我吗？

＆＃13;

＆＃13;

html,
body {
  min-height: 100%;
}

#wrapper {
  margin: 0 auto;
  max-width: 800px;
}

.blue-bg {
  background: #049ae6;
  bottom: 0;
  display: block;
  height: 300px;
  position: absolute;
  width: 100%;
  z-index: -1;
}

＆＃13;

<div id="wrapper">
  <section id="content">
    blah blah blah
  </section>
</div>
<span class="blue-bg"></span>

＆＃13;

＆＃13;

＆＃13;

内容会与底部附近的span元素重叠，如下所示：

Answer 1

<强>更新： position: absolute是正确的，但是：

  

位置为绝对的元素;相对于最近定位的祖先定位（而不是相对于视口定位，如固定）。   然而;如果绝对定位元素没有定位祖先，它将使用文档正文，并随页面滚动一起移动。

（https://www.w3schools.com/css/css_positioning.asp）

因此，我引入了另一个位置为relative的包装元素（#page）。

html, body {
    min-height: 100%;
    height: 100%;
}
#page {
  position: relative;
}
#wrapper {
    margin: 0 auto;
    height: 1000px; /* to force scrolling */
    max-width: 800px;
}
.blue-bg {
    background: #049ae6;
    bottom: 0;
    display: block;
    height: 300px;
    position: absolute;
    width: 100%;
    z-index: -1;
}

  <div id="page">
    <div id="wrapper">
      <section id="content">
          blah blah blah
      </section>
    </div>  
    <span class="blue-bg"></span>
  </div>