Html 使DIV位于页面底部，这样它就不会停留在绝对定位的内容的顶部了？

我必须为其他人生成的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>

我的头球
几个外部容器DIV，然后是带有内容的绝对定位DIV。
页脚在这里

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

更新

---

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

display:flex

可以完成以下任务：

html，
身体，
.我的包装纸{
身高：100%；
保证金：0；
}
.我的包装纸{
宽度：80%；
保证金：自动；
背景：番茄；
显示器：flex；
柔性流动：柱；
}
.其他包装{
弹性：1；
溢出：自动；
背景：绿松石；
}

我的页眉，
不管大小
如果需要，使用页眉和页脚与SCRLL之间的整个空间
如果需要，使用页眉和页脚与SCRLL之间的整个空间
如果需要，使用页眉和页脚与SCRLL之间的整个空间
如果需要，使用页眉和页脚与SCRLL之间的整个空间
如果需要，使用整个空间如果需要，在页眉和页脚与SCRLL之间使用页眉和页脚与SCRLL之间的整个空间
如果需要，在页眉和页脚与SCRLL之间使用整个空间
如果需要，在页眉和页脚与SCRLL之间使用整个空间
如果需要，在页眉和页脚与SCRLL之间使用整个空间
页脚和SCRLL（如果需要）
使用页眉和页脚与SCRLL（如果需要）
使用页眉和页脚与SCRLL（如果需要）
使用页眉和页脚与SCRLL（如果需要）
使用页眉和页脚与SCRLL（如果需要）
使用页眉和页脚与SCRLL（如果需要））之间的整个空间如果需要
使用页眉和页脚与SCRLL之间的整个空间如果需要
使用页眉和页脚与SCRLL之间的整个空间如果需要
使用页眉和页脚与SCRLL之间的整个空间如果需要
使用页眉和页脚与SCRLL之间的整个空间如果需要
使用页眉和页脚与SCRLL之间的整个空间
页眉和页脚与SCRLL之间的整个空间（如果需要）
页脚在这里，不管大小

这就是如何处理它的方法，保持

位置：绝对值

：Javascript计算标题大小，然后使用

顶部

将内容放在标题后面。然后，增加正文大小以打开空间，并在内容上使用

top

将页脚放在正文后面。函数以正文形式运行，因为它需要加载的内容才能获得适当的大小

或者，如果您能够让内容的位置不是“绝对”，则可以使用

document.getElementById（“Id”）.appendChild（元素）

以更轻松地放置分区（因为您不需要等待内容加载来选择其大小）

函数重建（）{
var contentheight=document.getElementById（'content'）。offsetHeight；
var bodyheight=document.getElementsByTagName（“body”）[0]。离视；
var headerheight=document.getElementById（'header'）。offsetHeight；
var footerheight=document.getElementById（'header'）。offsetHeight；
var result1=身高+页脚高度；
var result2=内容高度+人头高度；
document.getElementById（“content”）.style.top=headerheight；
document.getElementsByTagName（“body”）[0].style.height=result1+“px”；
document.getElementById（“footer”）.style.top=result2+“px”；
}

正文{
宽度：100%；
身高：100%；
边际：0px；
}
#标题{
宽度：100%；
高度：100px；
背景：天蓝色；
}
#内容{
位置：绝对位置；
显示：块；
宽度：100%；
背景：金；
}
#页脚{
位置：绝对位置；
高度：150像素；
宽度：100%；
显示：块；
背景：天蓝色；
}

标题
文本
文本
文本
文本
文本
文本
文本
文本
文本
文本
文本
文本
文本
文本
文本
文本
文本
文本
文本
文本
文本
文本
文本
文本
文本
文本
文本
文本
文本
文本
文本
文本
文本
文本
文本
文本
文本
文本
文本
文本
文本
文本
文本
文本
文本
页脚内容
页脚内容
页脚内容

除非您对这些div做了一些特殊的处理，否则您不一定需要其他人类的my wrapper或html中的div。您可以将div与我的header、others包装器和我的footer类一起使用。给这些课程一些高度的内容

我不确定用户是如何添加内容的，但如果您使用jQuery，可以使用

var usersContent = assign user content;
$('.others-wrapper').append(usersContent);

在用户添加的任何内容中，页眉将始终位于顶部，页脚将位于底部。我不会使用绝对定位，因为如果用户内容设置为高于查看区域，则会导致重叠。此外，您无法确定所有用户的设备查看区域。如果你这样做，你将不需要那么多的CSS，你让设备处理适当的位置

HTML看起来像这样

<div class="my-header">my header </div>
<div class="others-wrapper">
</div>
<div class="my-footer">footer goes here</div> 

我的头
页脚在这里

1-您可以更改

top