将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>

我不能使用粘性页眉或页脚。页脚必须保留在页面内容的底部，而不是视口的底部。

更新

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

Answer 1

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

＆＃13;

＆＃13;

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;
}

＆＃13;

<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>

＆＃13;

＆＃13;

＆＃13;

没有粘贴页眉/页脚的版本

＆＃13;

＆＃13;

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;
  }

＆＃13;

<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>

＆＃13;

＆＃13;

＆＃13;

Answer 2

这是保持position:absolute的方法：Javascript计算标题大小，然后使用top将内容放在其后面。然后，增加正文大小以打开空间，并在使用top将页脚放在其后的内容上执行相同操作。该函数在body load上运行，因为它需要一个加载的内容才能获得正确的大小。

或者，如果你能够让内容的位置不是“绝对”，你可以使用document.getElementById("Id").appendChild(element);更容易放置部分（因为你不需要等待内容加载来选择他们的大小）。

function rebuild(){
var contentheight = document.getElementById('content').offsetHeight;
var bodyheight = document.getElementsByTagName("body")[0].offsetHeight;
var headerheight = document.getElementById('header').offsetHeight;
var footerheight = document.getElementById('header').offsetHeight;

var result1 = bodyheight + footerheight;
var result2 = contentheight + headerheight;

document.getElementById("content").style.top = headerheight;
document.getElementsByTagName("body")[0].style.height = result1 + "px";
document.getElementById("footer").style.top = result2 + "px";
}

body {
width: 100%;
height: 100%;
margin: 0px;
}

#header {
width:100%;
height:100px;
background: skyblue;
}

#content {
position: absolute;
display: block;
width:100%;
background: gold;
}

#footer {
position: absolute;
height: 150px;
width: 100%;
display: block;
background: skyblue;
}

<body onload="rebuild()">

<div id=header>header</div>

<div id=content> text<br>text<br>text<br>text<br>text<br>text<br>text<br>text<br>text<br>text<br>text<br>text<br>text<br>text<br>text<br>text<br>text<br>text<br>text<br>text<br>text<br>text<br>text<br>text<br>text<br>text<br>text<br>text<br>text<br>text<br>text<br>text<br>text<br>text<br>text<br>text<br>text<br>text<br>text<br>text<br>text<br>text<br>text<br>text<br>text<br>text<br>text<br>text<br>text<br>text<br>text<br>text<br>text<br>text<br>text</div>

<div id=footer>footer content<br>footer content<br>footer content<br></div>

Answer 3

你不一定需要使用my-wrapper或html-from-other-people类的div，除非你正在做一些特别的事情。你可以使用带有my-header，others-wrapper和my-footer类的div。给这些类一些高度的内容填充它们。

我不确定您的用户是如何添加其内容的，但如果您使用的是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>