html - 将 DIV 设置到页面底部，以便它不会停留在绝对定位的内容之上？

Question

我必须在其他人生成的 HTML 内容周围添加一个包装器。我想要实现的是为其他人制作的所有页面(高度各不相同)添加页眉和页脚，以便所有新页面都有页眉和页脚。别人制作的页面都是绝对定位的。如何使用 CSS 使页脚位于页面底部，而不是位于其他人生成的内容之上？

这是我的 HTML 结构。我无法更改他人制作的内容的 HTML 结构或 CSS。

<div class="my-wrapper">
  <div class="my-header">my header </div>
  <div class="others-wrapper">
     <div class="html-from-other-people">
       <div> <!--this is one outside container -->
        A few outside container DIVs and then comes the absolutely-positioned DIV with content.
       </div>
     </div>
  </div>
  <div class="my-footer">footer goes here</div> 
</div>

我不能有粘性页眉或页脚。页脚必须位于页面内容的底部，而不是视口(viewport)的底部。

更新

其他人的 HTML 由一些外部容器 DIV 构成，然后是带有内容的绝对定位 DIV。请参阅上面更新的示例 HTML。

Answer 1

display:flex 可以完成这项工作:

html,
body,
.my-wrapper {
  height: 100%;
  margin: 0;
}
.my-wrapper {
  width:80%;
  margin:auto;
  background:tomato;
  display: flex;
  flex-flow: column;
}
.others-wrapper {
  flex: 1;
  overflow: auto;
  background:turquoise;
}

<div class="my-wrapper">
  <div class="my-header">my header , <br/>never mind the size</div>
  <div class="others-wrapper">
    <div class="html-from-other-people">use whole space between header & footer and scrlls if needed <br/>use whole space between header & footer and scrlls if needed <br/>use whole space between header & footer and scrlls if needed <br/>use whole space between header & footer and scrlls if needed <br/>use whole space between header & footer and scrlls if needed <br/>use whole space between header & footer and scrlls if needed <br/>use whole space between header & footer and scrlls if needed <br/>use whole space between header & footer and scrlls if needed <br/>use whole space between header & footer and scrlls if needed <br/>use whole space between header & footer and scrlls if needed <br/>use whole space between header & footer and scrlls if needed <br/>use whole space between header & footer and scrlls if needed <br/>use whole space between header & footer and scrlls if needed <br/>use whole space between header & footer and scrlls if needed <br/>use whole space between header & footer and scrlls if needed <br/>use whole space between header & footer and scrlls if needed <br/>use whole space between header & footer and scrlls if needed <br/>use whole space between header & footer and scrlls if needed <br/>use whole space between header & footer and scrlls if needed <br/>use whole space between header & footer and scrlls if needed <br/>use whole space between header & footer and scrlls if needed <br/>use whole space between header & footer and scrlls if needed 
    </div>
  </div>
  <div class="my-footer">footer goes here never mind the size</div>
</div>

---

没有粘页眉/页脚的版本

html,
body {
  height: 100%;
  margin: 0;
}
.my-wrapper {
  min-height: 100%;
  width:80%;
  margin:auto;
  background:tomato;
  display: flex;
  flex-flow: column;
}
.others-wrapper {
  flex:1 ;
  background:turquoise;
}
/* demo purpose */

.others-wrapper {
  color:green;
  font-size:1.5em;
}

.html-from-other-people {
  color:black;
  font-size:0.75em
}
:checked + div {
  font-size:0;
  }

<div class="my-wrapper">
  <div class="my-header">my header , <br/>never mind the size</div>
  <div class="others-wrapper">QUICK DEMO PURPOSE show/hide text below:<input type="checkbox">
    <div class="html-from-other-people">
        use whole space between header & footer and scrlls if needed <br/>use whole space between header & footer and scrlls if needed <br/>use whole space between header & footer and scrlls if needed <br/>use whole space between header & footer and scrlls if needed <br/>use whole space between header & footer and scrlls if needed <br/>use whole space between header & footer and scrlls if needed <br/>use whole space between header & footer and scrlls if needed <br/>use whole space between header & footer and scrlls if needed <br/>use whole space between header & footer and scrlls if needed <br/>use whole space between header & footer and scrlls if needed <br/>use whole space between header & footer and scrlls if needed <br/>use whole space between header & footer and scrlls if needed <br/>use whole space between header & footer and scrlls if needed <br/>use whole space between header & footer and scrlls if needed <br/>use whole space between header & footer and scrlls if needed <br/>use whole space between header & footer and scrlls if needed <br/>use whole space between header & footer and scrlls if needed <br/>use whole space between header & footer and scrlls if needed <br/>use whole space between header & footer and scrlls if needed <br/>use whole space between header & footer and scrlls if needed <br/>use whole space between header & footer and scrlls if needed <br/>use whole space between header & footer and scrlls if needed 
    </div>
  </div>
  <div class="my-footer">footer goes here never mind the size</div>
</div>